Bootstrap 4 Cheatsheet

Bootstrap 4 is a css based framework based on mobile friendly grids

Bootstrap 4

Bootstrap 4 is a CSS based framework that builds upon the core language of CSS. Bootstrap 4 is based upon CSS flexbox. Grid System Has 3 Main Parts CRC Silimar to table row cell

  • Container:This is the parent container that determines if the columns should be full-width(.container-fluid) or max-width(.container).
    Normal one per page
  • Row:A horizontal wrapping container for the series of columns it contains. fixed height, reset(clears floated columns)
  • Column:A column is a vertical division similar to a table cell where contain is defined
Bootstap 4 has 5 Breakpoints
  • xs = Extra small < 576px, mobile portrait
  • sm = Small =576px , mobile landscape
  • md = Medium =768px , tablets portrait
  • lg = Large =992px , tablets landscape
  • xl = Extra large =1200px ,lptops desktops
and allow the use of :-
  • Classic 12 grid columns good for standard layout highly flexible
  • Flexbox flexible box, layout system that makes it easy to create layouts more flewailty layout. The flex container has the ability to adjust and control the size of its child elements to adapt to different viewports
Other Functions
  • Images sizing, shadows, borders overlay text etc
  • Cards for panels display
  • Lists and badges
  • margin abd padding utils

Grid based

  • Columns must be the immediate child of a Row.
  • Rows are only used to contain Columns, nothing else.
  • Rows should be placed inside a Container.
  • Containers can be used to hold any elements/content to is used to control width of the layout
    • Fixed-width: elements are resized according to fixed size points
    • Full-width:(container-fluid) full width of the screen and resize as viewarea resizes
  • Rows are groups of columns as they can be layouted horizontally or vertically
    • Columns in each row are the same height,
    • width vary on viewport size
    • by default 12 column layout but can use new “Auto-layout” to have different layouts

classic 12 grid layout

md-6
6 md
3 md
fill
md-3
md-3

width change depending on screen width (viewport)
upto md 2 row,md and above 4 one row,

md3
md3
md3
md3

Flexbox

directly maps onto CSS flex layout used for 1D item (row or column based)

Row base layout

Use `col` for Columns that evenly fill across the viewport:
col
col
col
col
col
Use `col-auto` for Columns that shrink to fit their content:
col
col-auto
col-auto
col
col
col
The Auto-layout Columns can be combined with the 12-unit Columns:
col-5
col
col-5
The Auto-layout Columns have responsive tiers (-sm,-md,-lg,-xl) too!
col-md
col-md
col-md

Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Auto Margins

Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Align Items

Control the vertical alignment of single rows of flex items with the .align-content-* classes.

align-items-center

Flex item 1
Flex item 2
Flex item 3

.align-items-end:

Flex item 1
Flex item 2
Flex item 3

Align Self

Control the vertical alignment of a specified flex item with the .align-self-* classes.

.align-self-end:

Flex item 1
Flex item 2
Flex item 3

.align -self-center:

Flex item 1
Flex item 2
Flex item 3

Images

shapes

Circle

The .rounded-circle class shapes the image to a circle:

Cinque Terre

Rounded Corners

The .rounded class adds rounded corners to an image:

Cinque Terre

Thumbnail

The .img-thumbnail class creates a thumbnail of the image:

Cinque Terre

figures text overlays and shadows

Cinque Terre

Rainbow over beach.

...
Figure.
Cinque Terre

Rainbow over beach.

Align images text

Use img-fluid and float-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui temporibus aliquid dignissimos dolor aut at, libero est obcaecati...

Use img-fluid float-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui temporibus aliquid dignissimos dolor aut at, libero est obcaecati...

centered image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui temporibus aliquid dignissimos dolor aut at, libero est obcaecati...

Responsive Images

The default display option for images is their own width, hieght which usually breaks the responsive layout. optons include:- img-fluid : sized to parent element min width of parent element will not expand the image larger than its original size using w-* to resize image within parent, use clearfix if image is too large for parent container

Using grid lay and img-fluid

Spacing ulits width and height

col md 1 image reduced in size

Cinque Terre

col md 3

Cinque Terre

col md 6 smaller image

Cinque Terre

md-1 w 50

Cinque Terre

col md 3 w 75

Cinque Terre

colmd 3 w-75

Cinque Terre

Using clearfix to prevent image overflow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui temporibus aliquid dignissimos dolor aut at, libero est obcaecati...

Lists

Inline List

use list-inline and list-inline=item

  • List item one
  • List item two
  • List item three

Description List

use dl and dt/dd

Long title that is not truncated or shortened
Definition list description etiam porta sem malesuada magna mollis euismod.
Long title that is truncated or shortened
Definition list description etiam porta sem malesuada magna mollis euismod.
Nesting
Nested definition list
Definition list description etiam porta sem malesuada magna mollis euismod.

Horizontal List Groups

The .list-group-horizontal class displays the list items horizontally instead of vertically:

  • First item
  • Second item
  • Third item
  • Fourth item

Basic List Group usage

list-group and list-group-item

  • First item
  • Second item
  • Third item

Modal

Modal

Cards

basic formating element

Card titles, text, and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child (or the only one) in card-body. The .card-link class adds a blue color to any link, and a hover effect.

Card title

Some example text. Some example text.

Card link Another link
Header
Content
Card image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer whole card as link using stretched-link

See Profile
Card image

Card Image Overlay

Turn an image into a card background and use .card-img-overlay to overlay the card's text:

Card image

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

Column Cards

Cards Columns

The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you insert more cards.

Note: The cards are displayed vertically on small screens (less than 576px):

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Some text inside the fifth card

Some text inside the sixth card

Cards Deck

The .card-deck class creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards.
replace card-deck with card-group to remove left/right margins

first card

second card

third card

S fourth card

fifth card

Other items, carousels , etcs

Carousel