[Bootstrap] How to use the "grid system" that supports responsive web design
Bootstrap grid system
-
Bootstrap prepares media queries
-
Responsive design just by adding a class to the HTML tag
-
There is a fixed way to write it
This time it is a rudimentary elementary, so I made a structure like the GIF below. I will explain it.
environment
-
macOS Catalina 10.15.6
-
Bootstrap 4.3.1
-
Rails 6.0.3.4
This code
First, the code implemented this time is shown. It is difficult if you are not familiar with it, but please be assured that we will explain it one by one.
erb:index.html.erb
<%#Excerpt of only the necessary parts%>
<div class="container">
<h2><Vertically aligned at 576px</h2>
<h2>≧ 576px and half width</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<h2><Vertically aligned at 768px</h2>
<h2>≧ 768px and width ratio 1:3:2</h2>
<div class="row">
<div class="col-md-2">col-sm-2</div>
<div class="col-md-6">col-sm-6</div>
<div class="col-md-4">col-sm-4</div>
</div>
</div>
Basics of writing
1. Table-aware nested structure
The grid system has a structure of "** table that changes depending on the width **".
Basically, it is expressed like this using HTML.
index.html
<div class="container"> #Table outer frame
<div class="row"> #Table row
<div class="col"> #Table columns
</div>
</div>
</div>
Nested structure of container> row> col. If you want more lines ...
index.html
<div class="container"> #Table outer frame
<div class="row"> #Table row: 1
<div class="col"> #Table columns: 1-1
</div>
</div>
<div class="row"> #Table row: 2
<div class="col"> #Table columns: 2-1
</div>
</div>
</div>
If you want to add more columns ...
inde.html
<div class="container"> #Table outer frame
<div class="row"> #Table row: 1
<div class="col"> #Table columns: 1-1
</div>
<div class="col"> #Table columns: 1-2
</div>
<div class="col"> #Table columns: 1-3
</div>
</div>
<div class="row"> #Table row: 2
<div class="col"> #Table columns: 2-1
</div>
<div class="col"> #Table columns: 2-2
</div>
</div>
</div>
Write like this.
2. Responsive columns
Well, from here we will be responsive. It's easy to do, though.
This time, we will express " horizontal arrangement up to a certain width. Vertical arrangement </ b> when it becomes smaller than that."
The basic syntax in this case is as follows.
col- [width condition]-(how many 12 minutes)
Let's look at each one.
Width condition
This corresponds to a breakpoint. Bootstrap official website summarizes as follows.
- sm : 576px, smartphone
- md : 768px, medium
- lg : 992px, large
- xl : 1200px, Extra Large
Therefore, for example, if ** col-sm is added **, it means "vertical alignment with less than ** 576px **".
How many 12 minutes
Next is the setting of the width of each element. This is determined by the following rules.
- Set the width of row to 12
- Specify the ratio to 12 in col
Therefore, for example, if ** col-sm-6 is added , it means " Vertically below 576px. Half the width of the parent element ** above 576px".
The above is the basics of the grid system. With that in mind, let's take a look at the first code.
Unravel the first code
This time I wrote a code like this.
erb:index.html.erb
<%#Excerpt of only the necessary parts%>
<div class="container">
<h2><Vertically aligned at 576px</h2>
<h2>≧ 576px and half width</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<h2><Vertically aligned at 768px</h2>
<h2>≧ 768px and width ratio 1:3:2</h2>
<div class="row">
<div class="col-md-2">col-sm-2</div>
<div class="col-md-6">col-sm-6</div>
<div class="col-md-4">col-sm-4</div>
</div>
</div>
I have described the meaning of each div element in the h2 element, but I think you understand the meaning. With this coding, the following design was completed.
Summary
-
Responsive support is possible by using media queries prepared by Bootstrap.
-
If sm is added to the column element, the layout will change around 576px in width.
-
Determine the width of the column element up to the breakpoint with the width of the row element as 12.
To be honest, it was a grid system that I had avoided trying to make it difficult, but the basics were extremely simple.
Let's incorporate it into the original app!
bonus
Part of the code has been omitted in the text. Here is the raw code attached. For your reference (a little explained below).
erb:index.html.erb
<div class="container" style="height: calc(100vh - 56px - 56px); background-color: lightskyblue;">
<h2><Vertically aligned at 576px</h2>
<h2>≧ 576px and half width</h2>
<div class="row pb-5">
<div class="col-sm-6 btn btn-danger">col-sm-6</div>
<div class="col-sm-6 btn btn-secondary">col-sm-6</div>
</div>
<h2><Vertically aligned at 768px</h2>
<h2>≧ 768px and width ratio 1:3:2</h2>
<div class="row pb-5">
<div class="col-md-2 btn btn-danger">col-sm-2</div>
<div class="col-md-6 btn btn-secondary">col-sm-6</div>
<div class="col-md-4 btn btn-primary">col-sm-4</div>
</div>
</div>
【padding】
- pb-○ : padding-bottom
【button】
- btn: Buttoning
- btn-primary: Blue-based buttoning
- btn-secondary: Gray-based buttoning
- btn-danger: Red-based buttoning