BootStrap4: Grid system

1. container container

container: fixed-width container
container-fluid: responsive container

2. Grid options

Bootstrap4 has a total of five grid levels, and each responsive dividing point separates a level.

Insert image description here

Ps:.row has margin-left: -15px;margin-right: -15px; attributes, you can define the .no-gutters attribute on .row , thereby eliminating this attribute

Example 1: Equal-width layout

<body> 
          <div class="container"> 
                <div class="row"> 
                        <div class="col"> 1 of 2 </div> 
                        <div class="col"> 2 of 2 </div> 
                </div> 
                <div class="row"> 
                        <div class="col"> 1 of 3 </div> 
                        <div class="col"> 2 of 3 </div> 
                        <div class="col"> 3 of 3 </div> 
                </div> 
           </div>
</body>

Example 2: Multiple lines of equal width

<body> 
      <div class="container">
           <div class="row">
                 <div class="col">Column</div>
                 <div class="col">Column</div>
                 <!-- 引用.w-100进行切割分行-->
                 <div class="w-100"></div>
                 <div class="col">Column</div>
                 <div class="col">Column</div>
            </div>
       </div>
</body>

3. Grid alignment (vertical alignment)

align-items-start: vertically on top
align-items-center: Vertically centered
align-items-center: vertically bottom

Example: vertical alignment

Style effect:

Insert image description here

source code:

<body> 
     <div class="container">
           <div class="row align-items-start ">
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
            </div>
            <div class="row align-items-center ">
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
            </div>
            <div class="row align-items-end">
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
                <div class="col">One of three columns</div>
           </div>
     </div>
</body>

4. Grid alignment (horizontal alignment)

justify-content-start: align left
justify-content-center: center alignment
justify-content-end: right-aligned

Style effect:

Insert image description here

source code:

<div class=“container”>
	<div class="row justify-content-start">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-center">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-end">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-around">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
	<div class="row justify-content-between">
	        <div class="col-4"> One of two columns </div>
	        <div class="col-4"> One of two columns </div>
	</div>
</div>

5. Column offset

Use responsive .offset-* grid offset methods.

Style effect:

Insert image description here

Reference Code:

<div class=“container”>
     <div class="row">
          <div class="col-md-4 b">.col-md-4</div>
          <div class="col-md-4 offset-md-4 ">
                    .col-md-4 .offset-md-4
           </div>
     </div>
     <div class="row">
          <div class="col-md-3 offset-md-3 ">
              .col-md-3 .offset-md-3
          </div>
          <div class="col-md-3 offset-md-3 ">
              .col-md-3 .offset-md-3
          </div>
     </div>
     <div class="row">
          <div class="col-md-6 offset-md-3 ">
              .col-md-6 .offset-md-3
           </div>
     </div> 
</div>

6. Column nesting

This can be done by adding a new .row element and a series of .col-sm-* elements to the existing .col-sm-* elements.

Style effect:

Insert image description here

source code:

<div class=“container”>
       <div class="row">
             <div class="col-sm-9 ">
                  Level 1: .col-sm-9
                  <div class="row">
                         <div class="col-8 col-sm-6 ">
                               Level 2: .col-8 .col-sm-6
                         </div>
                         <div class="col-4 col-sm-6 ">
                                Level 2: .col-4 .col-sm-6
                         </div>
                 </div>
             </div>
      </div>
</div>