Grid In Bootstrap 4

admin

Cards

  1. Bootstrap 4 Grid, Bootstrap 4 Examples, Bootstrap Grid Templates, Bootstrap 4 Layouts, Bootstrap 4 Tables, Bootstrap 4 Colors, Bootstrap Cards Grid, Bootstrap Grid System, Bootstrap Columns, Bootstrap 4 Icons, Bootstrap 12 Column Grid, Bootstrap 4 Template Free, Bootstrap 4 Logo, Bootstrap Column Sizes, Sidebar Bootstrap 4, Bootstrap 4 Button Colors, Bootstrap 4 Form, Bootstrap 4 Navbar, Gulp.
  2. Nested Bootstrap 4 Grid Columns System. You can also place grid columns inside other grid columns in Bootstrap 4. This requires again a grid columns inside the.row class to create nested columns. The nested column should also be a 12 grid column to place in a row as given below.

A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.

John Doe

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

See Profile

Basic Card

The Bootstrap 4 grid system has five classes.col-(extra small devices - screen width less than 576px).col-sm-(small devices - screen width equal to or greater than 576px).col-md-(medium devices - screen width equal to or greater than 768px).col-lg-(large devices - screen width equal to or greater than 992px). Upgrade your Clever Techie learning experience:(9/13/19) New features and improvements for Clever Techie Patreons.

A basic card is created with the .card class, and content inside the card has a .card-body class:

Example

<div>
<div>Basic card</div>
</div>
Try it Yourself »

If you are familiar with Bootstrap 3, cards replace old panels, wells, and thumbnails.

Header and Footer

Content

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card:

Example

<div>
<div>Header</div>
<div>Content</div>
<div>Footer</div>
</div>
Try it Yourself »

Contextual Cards

To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Example









Try it Yourself »

Titles, text, and links

Card title

Some example text. Some example text.

Card linkAnother link

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) inside .card-body. The .card-link class adds a blue color to any link, and a hover effect.

Example

<div>
<div>
<h4>Card title</h4>
<p>Some example text. Some example text.</p>
<a href='#'>Card link</a>
<a href='#'>Another link</a>
</div>
</div>
Try it Yourself »

Card Images

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

See Profile

Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width:

Example

<div>
<img src='img_avatar1.png' alt='Card image'>
<div>
<h4>John Doe</h4>
<p>Some example text.</p>
<a href='#'>See Profile</a>
</div>
</div>
Try it Yourself »

Stretched Link

Add the .stretched-link class to a link inside the card, and it will make the whole card clickable and hoverable (the card will act as a link):

John Doe

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

BootstrapSee Profile

Jane Doe

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

See Profile

Example

<a href='#'>See Profile</a>
Try it Yourself »

Card Image Overlays

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

Turn an image into a card background and use .card-img-overlay to add text on top of the image:

Example

<div>
<img src='img_avatar1.png' alt='Card image'>
<div>
<h4>John Doe</h4>
<p>Some example text.</p>
<a href='#'>See Profile</a>
</div>
</div>
Try it Yourself »

Card Columns

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

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

Example

<div>
<div>
<div>
<p>Some text inside the first card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the second card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the third card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the fourth card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the fifth card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the sixth card</p>
</div>
</div>
</div>
Try it Yourself »

Card Deck

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

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.

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

Example

<div>
<div>
<div>
<p>Some text inside the first card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the second card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the third card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the fourth card</p>
</div>
</div>
</div>
Try it Yourself »

Card Group

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes left and right margins between each card.

Note: The cards are displayed vertically on small screens (less than 576px), WITH top and bottom margin:

Example

<div>
<div>
<div>
<p>Some text inside the first card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the second card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the third card</p>
</div>
</div>
<div>
<div>
<p>Some text inside the fourth card</p>
</div>
</div>
</div>
Try it Yourself »

Bootstrap 4 Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Grid Classes

The Bootstrap 4 grid system has five classes:

  • .col- (extra small devices - screen width less than 576px)
  • .col-sm- (small devices - screen width equal to or greater than 576px)
  • .col-md- (medium devices - screen width equal to or greater than 768px)
  • .col-lg- (large devices - screen width equal to or greater than 992px)
  • .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

Grid System Rules

Some Bootstrap 4 grid system rules:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element
  • The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as 'equal width columns' (and equal height). Example: Three elements with .col-sm will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.

Note that Flexbox is not supported in IE9 and earlier versions.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

Grid In Bootstrap 4.5

<!-- Control the column width, and how they should appear on different devices -->
<div>
<div></div>
<div></div>
<div></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Try it Yourself »

First example: create a row (<div>). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should always add up to 12 for each row.

Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns: two 'col' elements = 50% width to each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You can also use .col-sm md lg xl to make the columns responsive.

Grid Options

The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:

Extra small (<576px)Small (>=576px)Medium (>=768px)Large (>=992px)Extra Large (>=1200px)
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
Grid behaviourHorizontal at all timesCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpoints
Container widthNone (auto)540px720px960px1140px
Suitable forPortrait phonesLandscape phonesTabletsLaptopsLaptops and Desktops
# of columns1212121212
Gutter width30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)
NestableYesYesYesYesYes
OffsetsYesYesYesYesYes
Column orderingYesYesYesYesYes

Examples

The next chapters shows examples of grid systems for different devices and screen widths:


Grid In Bootstrap 4