When the screen is small, such as on a smartphone, you may want to collapse the displayed items to reduce the number of items displayed, and when the screen is large, you may want to display the list as usual.
Bootstrap's grid system allows you to adjust the content displayed depending on the screen size.
To use the grid system, first enclose the entire range you want to apply using the container class.
<div class="mt-4 container">
omitted
</div>
Add the row class below that.
<div class="mt-4 container">
<div class="row">
omitted
</div>
</div>
Place the element to which you want to apply the column layout inside the "omitted" box above.
This idea is basic.
This time, using the form element as an example, we will create code that will line up the name on the left and the input form on the right when it is 576px or more.
<div class="container">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="name">
</div>
</div>
</div>
Let's check the code.
Create an image with Name on the left and input form on the right.
First, we surround the whole thing with a container class and also add a row class.
Inside it, place the elements you want to line up left and right.
I placed the Name on the left and the input form on the right.
However, because it is col-sm-3, Name has 3 widths if the screen size is 576px or more.
Similarly, the input form on the right is col-sm-9, so when the screen is 576px or more, it has 9 widths.
I created code that uses Bootstrap's grid system to change the display method depending on the screen size.
Bootstrap allows you to customize the appearance of your pages.
I've repeated this several times, and it seems to be a relatively low level of difficulty in programming.
This is the content you will learn in the basics of the front end course, so please take a look at it for reference.
【参考/受講】
【土曜日】
業務である以上、ある程度定型に沿ったものですが、それにも関わらず問い詰め、騒がしい職場であれば、疲れの回復に時間を要することもあります。
その分、休日とはいえ、やれることは減るため、何か別のことすることが有意義な曜日になります。