Bootstrap CSS Grid - Bootstrap Grid System


Bootstrap CSS Grid

  • Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.

How it works

  • CSS Grid is opt-in - Disable the default grid system by setting $enable-grid-classes: false and enable the CSS Grid by setting $enable-cssgrid: true. Then, recompile your Sass.
  • Replace instances of .row with .grid - The .grid class sets display: grid and creates a grid-template that you build on with your HTML.
  • Replace .col-* classes with .g-col-* classes - This is because our CSS Grid columns use the grid-column property instead of width.
  • Columns and gutter sizes are set via CSS variables - Set these on the parent .grid and customize however you want, inline or in a stylesheet, with --bs-columns and --bs-gap.

Bootstrap CSS Grid Three columns

  • Three equal-width columns across all viewports and devices can be created by using the .g-col-4 classes. Add responsive classes to change the layout by viewport size.
how-to-create-css-grid-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div class="g-col-4">.g-col-4</div>
      <div class="g-col-4">.g-col-4</div>
      <div class="g-col-4">.g-col-4</div>
    </div>
  </body>
</html>

Output

bootstrap-css-grid

Bootstrap CSS Grid Responsive Example 1

  • Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.
how-to-create-css-grid-responsive-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
      <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
      <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
    </div>
  </body>
</html>

Output

bootstrap-css-grid-responsive

Bootstrap CSS Grid Responsive Example 2

how-to-create-css-grid-responsive-layout-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    </div>
  </body>
</html>

Output

bootstrap-responsive-grid-css-layout

Bootstrap CSS Grid Wrapping

  • Grid items automatically wrap to the next line when there’s no more room horizontally. Note that the gap applies to horizontal and vertical gaps between grid items.
how-to-create-css-grid-wrap-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    </div>
  </body>
</html>

Output

bootstrap-css-grid-wrap

Bootstrap CSS Grid Starts

  • Start classes aim to replace our default grid’s offset classes, but they’re not entirely the same. CSS Grid creates a grid template through styles that tell browsers to “start at this column” and “end at this column.” Those properties are grid-column-start and grid-column-end. Those properties are grid-column-start and grid-column-end.
how-to-create-grid-start-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
      <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-start

Bootstrap CSS Grid Auto columns Example 1

  • When there are no classes on the grid items (the immediate children of a .grid), each grid item will automatically be sized to one column.
how-to-create-12-column-grid-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </body>
</html>

Output

bootstrap-12-column-grid

Bootstrap CSS Grid Auto columns Example 2

how-to-create-grid-column-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center">
      <div class="g-col-6">.g-col-6</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-column

Bootstrap CSS Grid Nesting

  • We override the default number of columns with a local CSS variable: --bs-columns: 3.
  • In the first auto-column, the column count is inherited and each column is one-third of the available width.
  • In the second auto-column, we’ve reset the column count on the nested .grid to 12 (our default).
  • The third auto-column has no nested content.
how-to-create-grid-nesting-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-columns: 3;">
      <div>
        First auto-column
        <div class="grid">
          <div>Auto-column</div>
          <div>Auto-column</div>
        </div>
      </div>
      <div>
        Second auto-column
        <div class="grid" style="--bs-columns: 12;">
          <div class="g-col-6">6 of 12</div>
          <div class="g-col-4">4 of 12</div>
          <div class="g-col-2">2 of 12</div>
        </div>
      </div>
      <div>Third auto-column</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-nesting

Bootstrap CSS No grid classes

  • Immediate children elements of .grid are grid items, so they’ll be sized without explicitly adding a .g-col class.
how-to-create-custom-grid-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-columns: 3;">
      <div>Auto-column</div>
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-custom

Bootstrap CSS Grid Columns and Gaps Example 1

  • Adjust the number of columns and the gap.
how-to-create-grid-column-gap-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
      <div class="g-col-2">.g-col-2</div>
      <div class="g-col-2">.g-col-2</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-column-gap

Bootstrap CSS Grid Columns and Gaps Example 2

how-to-create-grid-gap-between-columns-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-4">.g-col-4</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-gap-between-columns

Bootstrap CSS Grid Adding Rows

  • Adding more rows and changing the placement of columns.
how-to-create-grid-row-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
      <div>Auto-column</div>
      <div class="g-start-2" style="grid-row: 2">Auto-column</div>
      <div class="g-start-3" style="grid-row: 3">Auto-column</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-row

Bootstrap CSS Grid Gaps Example 1

  • Change the vertical gaps only by modifying the row-gap. Note that we use gap on .grids, but row-gap and column-gap can be modified as needed.
how-to-create-grid-gap-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="row-gap: 0;">
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    </div>
  </body>
</html>

Output

bootstarp-grid-gap

Bootstrap CSS Grid Gaps Example 2

how-to-create-gap-grid-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-gap: .25rem 1rem;">
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    
      <div class="g-col-6">.g-col-6</div>
      <div class="g-col-6">.g-col-6</div>
    </div>
  </body>
</html>

Output

bootstrap gap grid

Bootstrap CSS Grid Sass

  • One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS.
  • For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .g-col-4).
how-to-create-grid-sass-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-cssgrid">
    <div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
      <div style="grid-column: span 14;">14 columns</div>
      <div class="g-col-4">.g-col-4</div>
    </div>
  </body>
</html>

Output

bootstrap-grid-sass

Related Searches to Bootstrap CSS Grid - Bootstrap Grid System

bootstrap grid css only bootstrap 5 grid css only bootstrap grid react bootstrap grid d grid bootstrap 5 bootstrap 5 responsive grid bootstrap grid bootstrap layout bootstrap-grid css only download bootstrap grid css cdn bootstrap responsive grid bootstrap grid examples bootstrap css grid system bootstrap css grid examples bootstrap css grid only bootstrap css grid not working bootstrap css grid layout example bootstrap css grid generator bootstrap css grid responsive design bootstrap css grid height bootstrap css grid template react bootstrap css grid

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2024 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai