[Bootstrap] How to use the "grid system" that supports responsive web design

Bootstrap grid system


This time it is a rudimentary elementary, so I made a structure like the GIF below. I will explain it.

demo


environment


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.

demo


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

Recommended Posts

[Bootstrap] How to use the "grid system" that supports responsive web design
How to use the link_to method
How to use the include? method
How to use the form_with method
How to use the wrapper class
About the matter that I was addicted to how to use hashmap
The operator that was born to be born, instanceof (Java) ~ How to use the instanceof operator ~
[Java] How to use the File class
[Java] How to use the hasNext function
How to use BootStrap with Play Framework
[Java] How to use the HashMap class
[Rails] How to use the map method
[Java] How to use the toString () method
Studying how to use the constructor (java)
[Processing × Java] How to use the loop
[Processing × Java] How to use the class
[Processing × Java] How to use the function
[Java] How to use the Calendar class
How to use the camera module OV7725 (ESP32-WROVER-B)
[Java] How to use Thread.sleep to pause the program
Output of how to use the slice method
How to use the replace () method (Java Silver)
[Ruby basics] How to use the slice method
How to use Maven that I can't hear anymore
[Rails] I don't know how to use the model ...
[Beginner] Discover the N + 1 problem! How to use Bullet
How to use Map
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use java.util.logging
How to use map
How to use collection_select
How to adapt Bootstrap
How to use Twitter4J
How to use active_hash! !!
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
[How to use label]
How to use identity
How to use hashes
How to use JUnit 5
How to use Dozer.mapper
How to use Gradle
How to use org.immutables
How to use java.util.stream.Collector
How to use VisualVM
How to use Map
How to use the getter / setter method (in object orientation)
How to use Maven to place resource files outside the JAR
How to create a placeholder part to use in the IN clause
Uppercase only the specified range with substring. (How to use substring)
[Reading memo] System design principles that are useful in the field- "Small and easy to understand"
[Java] How to use Map
How to use Chain API
[Java] How to use Map
How to use Priority Queuing
[Rails] How to use enum
How to use java Optional