search

Home  >  Article  >  Web Front-end  >  Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontally

Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontally

青灯夜游
青灯夜游forward
2021-11-01 11:11:502395browse

This article will take you through the grid layout in Bootstrap, and look at the vertical alignment and horizontal alignment. I hope it will be helpful to you!

Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontally

1. Bootstrap Grid Layout

In the previous section we introduced the grid in Bootstrap, and the grid is used in web page layout is a key and difficult point. Layout is the starting point and foundation of web design. You must spend time to understand it. At least understand the content of the tutorial I wrote, because what I wrote is the most commonly used and basic. Of course, for a web designer with a certain foundation, I believe these contents can be understood at a glance. Today we will learn more about grid layout. [Related recommendations: "bootstrap Tutorial"]

This section involves some functions in the general-purpose flexible box (Flex).

2. Vertical alignment

2.1 Set vertical alignment in the row tag

By setting the row Add align-items-start, align-items-center, align-items-end to the tag to change the vertical alignment of the row in the container, as above The three labels are top alignment, center alignment, and bottom alignment. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect. 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-end">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontally

2.2 Set vertical alignment in col tag

By adding in col tag align-self-start, align-self-center, align-self-end can change the vertical alignment of the column in the row, the above three labels are the top Alignment, center alignment, bottom alignment. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect. 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div class="col  align-self-start"> </div>
            <div class="col align-self-center"></div>
            <div class="col align-self-end"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontally

3. Horizontal alignment

##3.1 Set vertical alignment in row tag

By adding

justify-content-start, justify-content-center, justify-content-end, # in the row tag ##justify-content-around, justify-content-between, justify-content-evenly can change the horizontal alignment of columns within a row. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect. <pre class="brush:html;toolbar:false;">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt; &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt; &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;style&gt; .row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;} .col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;} &lt;/style&gt; &lt;title&gt;垂直对齐演示&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div class=&quot;row justify-content-start&quot;&gt; &lt;div&gt; &lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;div&gt; &lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-end&quot;&gt; &lt;div&gt; &lt;/div&gt; ## &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-around&quot;&gt; &lt;div&gt; &lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-between&quot;&gt; &lt;div&gt; &lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-evenly&quot;&gt; &lt;div&gt; &lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre>

Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontallyFor more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of Let’s talk about the grid layout in Bootstrap and see how to align vertically and horizontally. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete
Previous article：What files do bootstrap need to reference?Next article：What files do bootstrap need to reference?

Related articles

See more