Grid Bootstrap 4

admin 11/23/2021
22 Comments

Cards

The grid is one of the core assets of Bootstrap 4 - time to take a closer look and understand how you may use it!You prefer CSS? Join the full CSS course: ht. So I guess I need to define a minimum and maximum size for the items, so I can make the grid define the optimal number of items on each page. I guess it can be done with flexbox in Bootstrap 4, but I don't find any examples in the documentation.

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

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

See 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

Bootstrap 4 grid rowspan

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

Css
<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>

Grid Bootstrap 4.5

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.

Bootstrap Grid Offset

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

Grid Bootstrap 4 Psd

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 »

Grid In Bootstrap 4


Bootstrap 4 Grid System

The bootstrap 4 grid system is used to create a responsive website layout. The bootstrap 4 offers a mobile-first flexbox grid system that allows you to divide the viewport or screen into 12 columns. It also provides predefined Bootstrap grid classes that help to make a grid very quickly for devices such as cell phones, tablets, laptops, etc.

The bootstrap 4 grid system also arranges the columns and the content inside the column automatically according to the screen size.

Grid Classes

  • .col-* = This class is used to create grid layout (columns) on extra small devices having screen width less than 576 px.
  • .col-sm-* = This class is used to create grid layout (columns) on small devices having screen width equal to or greater than 576 px.
  • .col-md-* = This class is used to create grid layout (columns) on medium devices having screen width equal to or greater than 768 px.
  • .col-lg-* = This class is used to create grid layout (columns) on large devices having screen width equal to or greater than 992 px.
  • .col-xl-* = This class is used to create grid layout (columns) on extra-large devices having screen width equal to or greater than 1200 px.

Grid System Rules

  • The rows should be placed inside the .container class for fixed width or .container-fluid class for full width to provide proper alignment or padding to the content.
  • Use .row class to make a group of columns.
  • All the content must be placed in the columns only. The columns are the immediate children of row.
  • The .row class and .col-sm/md/lg-* class are used to create a quick grid layout. Where, * = 1 to 12.
  • The columns create a gap between column content through padding. That padding acts as an offset in rows for the first and last column by providing a negative margin to the rows.
  • To create a grid column, you need to specify the number of columns you want to create.
  • The column widths are always specified in percentage.
  • The main difference between the bootstrap 3 and bootstrap 4 is that Bootstrap 4 uses flexbox instead of floats that are used in bootstrap 3.

Basic Structure of Bootstrap 4 Grid System