Bootstrap 4 Grid System Tutorial With Example

Bootstrap 4 Grid System Tutorial With Example

Grid systems enable you to build advanced layouts using rows and columns. It provides the fast and easy way to create responsive website layouts.

#1: Introduction

The Bootstrap Grid System supports 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 4 grid system example

Bootstrap 4 Grid System is responsive and the columns are re-arranged automatically according to the screen size.

#2: Grid Classes

There are four classes in the Bootstrap Grid System:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

The following table analyzes some of the key features of the new grid system

bootstrap 4 grid system

Above table shows one important thing, applying any .col-sm-* class to an element will not only change its styling on small devices but also on medium and large devices having a screen size equal or greater than to 768px.

#3: Things to Remember with Grids

1) Containers :

         A grid should be placed within a container class for proper padding and alignment.

2) Rows & Columns :

        Columns contain the content. Rows contain one or more columns. Only columns can be immediate children of rows.

3) Padding :

        Columns contain padding. A negative margin on the row offsets the padding at the first and last column.

4) Grid Classes :

       Grid classes apply to devices with screen widths equal or greater than to the breakpoint sizes and override grid classes targeted at smaller devices.

5) Multiple Classes :

       You can use multiple class sizes for a given element. For example, you could use class=”col-sm-12 col-md-6″ to specify 12 columns for small viewports and 6 columns for medium and large viewports.

#4: Bootstrap 4 Grid System Example

Now, see the basic structure of the bootstrap 4 grid system.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Grid System Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h1>Hello Investmentnovel</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>
</body>
</html>

You can see below screenshot on your screen.

bootstrap 4 grid system tutorial

 

At last, our Bootstrap 4 Grid System Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.