The **Bootstrap 4 grid system** comes in handy when you want to build a responsive website. The Bootstrap 4 grid system is built with flexbox and allows up to 12 columns across the page. The 12 columns can be grouped to create wider columns if you do not wish to use the 12 columns individually.

The columns re-arrange automatically, depending on the screen size. Bootstrap 4 grid is a responsive system that is an easy tool to use to create responsive layouts.


 

#    
## Classes

The Bootstrap 4 grid system has five classes to make our work easier. 

The classes are categorized based on the preferable screen size of the devices to be used on. The classes are as follows:

1. **.col-** (*extra small devices* - screen width of less than *576px*).

2. **.col-sm-** (*small devices* - screen width equal to or greater than *576px*).

3. **.col-md-** (*medium width* - screen width equal to or greater than *768px*).

4. **.col-lg-** (*large devices* -screen width equal to or greater than *992px*).

5. **.col-xl-** (*extra-large devices* - screen width equal to or greater than *1200px*).


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



#   
## Create a basic Bootstrap 4 grid

There are two methods to create a basic grid:

- The first is to let Bootstrap automatically handle the layout.

- The second is to control the column width and how they should appear on different devices.


Here are the steps to create a basic grid:

1.  Create a *row* by creating a `div` element that contains `class="row"`. 

2. Create another `div` with any of the grid classes (sm, md, lg, xl).
       


        




<!DOCTYPE html>
<html>

<head>
	<title>
		How to get circular buttons
		in bootstrap 4 ?
	</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.3.1/css/bootstrap.min.css">
		
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
		
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
	</script>
		
	<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
	</script>
	
</head>

<body>
	<div class="row">
		<div class="col-sm-12"> content </div>
	</div>
</body>

</html>					

codemirror

#   
## Tips
1.  Do not add a number to each .col if you want Bootstrap to handle the layout automatically. So, to create two equal columns, only add two "col" elements. The number of "col" elements is equal to the number of columns you desire.

2. Use any of the grid classes (.col-sm| md| lg| xl) to make the columns responsive. 

3.  To create unequal columns, add a desired number of columns (you want to add up) to each "col" element. 

## Code
Check out the examples below.


<!DOCTYPE html>
<html>

 <head>
   <title> Grid system</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.3.1/css/bootstrap.min.css">
   	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 </head>
 <body>
   <div class="container">
     <div class="row">
       <h1 class="text-center"> creating two equal columns</h1>
       <hr />
       <div>
       <p> Bootstrap handles the layout because a number is not added to the <code> col</code> class.
       </p>
       </div>
       <hr />
         <div class="col"> content 1 </div>
         <div class="col"> content 2 </div>
       </h1>
     </div>
 </body>
</html>

<!DOCTYPE html>
<html><head>
	<title>
		How to get circular buttons
		in bootstrap 4.
	</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.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="row">
      <h1 class="text-center">Creating four small device responsive equal columns</h1>
      <hr />
      <div>
        <p> <code> sm</code> is specified to make the column responsive on small devices. You can also add other grid classes <code> md, lg, xl </code> to make the columns responsive on the desired screen sizes.</p>
        <br>
        <p>Also, you can simply specify a desired number that will add up to 12 to the <code> col-sm</code> if you want un-equal columns. This is done by adding a dash <strong> -</strong> followed by the desired number.<br> <span class="text-uppercase"> Edit the code to check</span></p>
      </div>
      <hr />
      <div class="row">
        <div class="col-sm"> content 1 </div>
        <div class="col-sm"> content 2</div>
        <div class="col-sm"> content 3</div>
        <div class="col-sm"> content 4</div>
      </div>
    </div> 
  </div>
  </div>
	</body>
</html>		


<!DOCTYPE html>
<html><head>
	<title>
		How to get circular buttons
		in bootstrap 4.
	</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.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="row">
      <h1 class="text-center">Creating four Un-equal columns</h1>
      <hr />
      <div>
        <p>A desired number is added to the <code> col</code> because we want un-equal columns. These number add up to <strong> 12 </strong>. <br> You can also add any of the <strong> grid classes </strong> to handle the responsiveness.</p>
      </div>
      <hr />
      <div class="col-4"> content 1 </div>
        <div class="col-3"> content 2</div>
        <div class="col-2"> content 3</div>
        <div class="col-3"> content 4</div>
    </div> 
  </div>
  </div>
	</body>
</html>		


Notice the space each column occupies to see the effect.





What are Bootstrap 4 grid basics?

The Bootstrap 4 grid system comes in handy when you want to build a responsive website. The Bootstrap 4 grid system is built with flexbox and allows up to 12 columns across the page. The 12 columns can be grouped to create wider columns if you do not wish to use the 12 columns individually. The columns re-arrange automatically, depending on the screen size. Bootstrap 4 grid is a responsive system that is an easy tool to use to create responsive layouts. 