24 Bootstrap Grid Examples (2022)

Collection of free Bootstrap grid code examples: grid system, grid layout, image grid, flexbox, etc.

Related Articles

  1. CSS Grid Examples
24 Bootstrap Grid Examples (1)

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 List Grid View Template

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.4.1

24 Bootstrap Grid Examples (2)

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Ecommerce Services Grid List with Pagination

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.4.1

24 Bootstrap Grid Examples (3)

Author

  • Ondrej

Made with

  • HTML / CSS / JS

About a code

Bootstrap Masonry

Use Masonry layouts with Bootstrap 4 grid system, using imagesLoaded plugin to fix the page loading issue.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, imagesloaded.js, masonry.js

Bootstrap version: 4.3.1

24 Bootstrap Grid Examples (4)

Author

  • epicbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap Team Grid

Photo gallery for introducing your project's team members. Minimalistic design with personal and business details shown on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.1.3

24 Bootstrap Grid Examples (5)

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Grid View Container with Font Awesome

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

(Video) [#24] Bootstrap Grid Examples

Dependencies: font-awesome.css

Bootstrap version: 4.0.0

24 Bootstrap Grid Examples (6)

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Draggable Grid with Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

24 Bootstrap Grid Examples (7)

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Simple Product Shopping Grid Styles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.1.1

24 Bootstrap Grid Examples (8)

Author

  • startbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 About and Team Section

A Bootstrap 4 example layout with an about section and team members.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

24 Bootstrap Grid Examples (9)

Author

  • startbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 One Column Portfolio Layout

A basic portfolio page layout snippet with one content column built with Bootstrap 4.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.1.3

24 Bootstrap Grid Examples (10)

Author

  • startbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Two Column Portfolio Layout

A basic portfolio page layout snippet with two content columns built with Bootstrap 4.

(Video) [#24] What Is Bootstrap Grid System?

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

24 Bootstrap Grid Examples (11)

Author

  • startbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Three Column Portfolio Layout

A basic portfolio page layout snippet with three content columns and equal card heights built with Bootstrap 4.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

24 Bootstrap Grid Examples (12)

Author

  • startbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Portfolio Item Details Page

A simple portfolio item details page example built with Bootstrap 4.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

24 Bootstrap Grid Examples (13)

Author

  • startbootstrap

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Four Column Portfolio Layout

A basic portfolio page layout snippet with four content columns and equal card heights built with Bootstrap 4.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

24 Bootstrap Grid Examples (14)

Author

  • Sylvain Peigney

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Scrollable / Grid Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.1.3

24 Bootstrap Grid Examples (15)

Author

  • Timothee Guignard
(Video) New Grid System in Bootstrap 5.2 (Practical Examples)

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animate a Bootstrap Grid (JS/CSS)

Here is an exemple of a Bootstrap Grid animation. This is very simple, with a toggle button. It can of course be adjusted for a window.resize or anything else. I just wanted try how to do it, how to structure the idea. The code itself is probably not the best ever though ^^. The same idea can be used for any grid system, or even a personal one. Still need to be improved (especially when scrolling during the animation). (Of course, the filters on the left are there as a pretext, they don't work)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.1.1

24 Bootstrap Grid Examples (16)

Author

  • Benoit Pontbriand

Made with

  • HTML / CSS / JS

About a code

Cards Hover Effects

Bootstrap grid for cards with hover effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.1.1

24 Bootstrap Grid Examples (17)

Author

  • Walia5

Made with

  • HTML / CSS

About a code

Bootstrap 4 Equal Height Cards using Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.1.1

24 Bootstrap Grid Examples (18)

Author

  • Todd Coleman

Made with

  • HTML / CSS / JS

About a code

Bootstrap Grid Examples

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.0.0

24 Bootstrap Grid Examples (19)

Author

  • Syk Houdeib

Made with

  • HTML / CSS / JS

About a code

Bootstrap Image Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 3.3.7

24 Bootstrap Grid Examples (20)

Author

  • Richard Gonyeau
(Video) Bootstrap Grid Example

Made with

  • HTML / CSS / JS

About a code

Grid Gallery

This is a simple 8-Up image gallery. It uses the bootstrap grid framework to keep everything symmetrical, regardless of media query. Clicking on an image will initiate full width, and display a title and description. Classes have been included to move the description (top-right, bottom-left, etc.) so that the user can appropriately place it depending on the image content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Bootstrap version: 3.3.5

24 Bootstrap Grid Examples (21)

Author

  • O King Chun

Made with

  • HTML / CSS / JS

About a code

Bootstrap Grid List View

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.3.5

24 Bootstrap Grid Examples (22)

Author

  • David Foliti

Made with

  • HTML / CSS (Less) / JS

About a code

Material Design - Responsive Grid Card

Responsive material card based on Google Material Color palette in a Bootstrap grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.4

24 Bootstrap Grid Examples (23)

Author

  • Marco Barría

Made with

  • HTML / CSS (SCSS) / JS

About a code

Bootstrap Grid Zoom

Very simple concept of image to display details. use: Handlebars, Bootstrap grid and Velocity.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, velocity.js, handlebars.js

Bootstrap version: 3.3.1

24 Bootstrap Grid Examples (24)

Author

  • sachinkul6185@gmail.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Grid With Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 3.3.0

(Video) Bootstrap 5 Tutorial For Beginners #24 - Bootstrap Progress Bar Tutorial

FAQs

Can we create a 20 column layout with Bootstrap 12 grid layout? ›

Bootstrap Newbie: No, that won't work. The Bootstrap grid has only 12 columns, so you should never have more than 12 columns in a row. You should have only 3 col-md-4 in each . row element, because 3*4=12.

Is Bootstrap always 12 columns? ›

You can edit the amount of columns with LESS. 12 is the default because it is the most flexible grid pattern over any possible numbers up to 12.

What is the maximum number grids allowed in Bootstrap? ›

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

Which class will separate the entire width of the browser screen by columns of 25%? ›

For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples. Column classes indicate the number of columns you'd like to use out of the possible 12 per row.

How can use more than 12 columns in Bootstrap? ›

Bootstrap was made for a 12-col usage.

If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables : @grid-columns : Number of columns in the grid. @grid-gutter-width Padding between columns.

Which layout in Bootstrap will provide 100% width? ›

Containers. Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time).

Why is it more flexible to use a 12 or 16 columns grid for page layout? ›

Many popular frameworks use a grid system of 12 equal-widths column. The number 12 is the most easily divisible among reasonably small numbers; it's possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout.

What is a 12 column grid? ›

“Web design 12 column grid” is the best design. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40-pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

How do I align 3 divs in one row in HTML? ›

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.

Is grid better than Bootstrap? ›

Bootstrap offers more than a grid layout system and is more of a frontend toolkit suite capable of pulling off complex responsive designs through its predefined classes.

How do I make 4 columns in Bootstrap? ›

First example: create a row ( <div class="row"> ). 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.

How do I make 5 equal columns in Bootstrap? ›

Write a basic HTML template using these files. Once everything is set up, create a simple 'container' div inside <body> tag. Inside the 'container', create another div with class 'row' and as the name suggests, we are creating a row for handling columns. Populate the 'row' div with 5 divs with class 'col'.

Why is it more flexible to use a 12 or 16 columns grid for page layout? ›

Many popular frameworks use a grid system of 12 equal-widths column. The number 12 is the most easily divisible among reasonably small numbers; it's possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout.

What is 12 grid column system in Bootstrap? ›

The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or you can groups the columns together to create wider columns. Bootstrap Grid System is responsive and the columns are re-arranged automatically according to the screen size.

How many columns are in a row in Bootstrap grid system? ›

There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). width s are set in percentages so you always have the same relative sizing.

What does Col MD 12 mean? ›

col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...

Videos

1. Bootstrap Grid Layout Tutorial|Bootstrap Grid Layout System|Bootstrap Grid Layout Example #bootstrap
(Codepedia By Newton School)
2. 24 - ( Bootstrap 4 Tutorial ) Utilities : Border
(Unique Coderz Academy)
3. Part 24- Divide page into several component using Bootstrap Grid System in asp.net MVC
(Ashish Tiwary)
4. How to Calculate Responsive Grid Layouts (STEP BY STEP!!)
(Mizko)
5. Bootstrap 3 grid classes
(kudvenkat)
6. [#23] Bootstrap Grid System
(IdynXcode)

Top Articles

You might also like

Latest Posts

Article information

Author: Cheryll Lueilwitz

Last Updated: 07/13/2022

Views: 5517

Rating: 4.3 / 5 (74 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Cheryll Lueilwitz

Birthday: 1997-12-23

Address: 4653 O'Kon Hill, Lake Juanstad, AR 65469

Phone: +494124489301

Job: Marketing Representative

Hobby: Reading, Ice skating, Foraging, BASE jumping, Hiking, Skateboarding, Kayaking

Introduction: My name is Cheryll Lueilwitz, I am a sparkling, clean, super, lucky, joyous, outstanding, lucky person who loves writing and wants to share my knowledge and understanding with you.