Bootstrap 4 Flashcards
What is the responsive meta tag?
What is the responsive meta tag?
What does this code do...
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>Three columns, middle one taking up half space (6 of 12) the other two equally distribute space between them.
Compare to...
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Which gives 5/12 to the middle column and each of the two remaining columns get 3.5 each (3.5/7 remaining)Make three equal width columns in Bootstrap.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>What does this code do...
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>Three columns, middle one taking up half space (6 of 12) the other two equally distribute space between them.
How do you make a basic Bootstrap grid with one column?
<div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>What are the three basic rules of the Bootstrap grid?
The Rules of the Grid:
1) Columns must be the immediate child of a Row.
2) Rows are only used to contain Columns, nothing else.
3) Rows should be placed inside a Container.
The Rows & Columns always work together, and you should never have one without the other.
Can a Bootstrap container have elements & content not inside rows & columns?
The Container can be used to hold any elements and content. It’s not only used for the Grid Rows & Columns. For example, this is perfectly valid Bootstrap markup:
<div class="container">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid!</div>
</div>
</div>
What are the two types of Bootstrap containers?
1 — Fixed-width container to center your layout in the middle:
<div></div>
2 — Full-width container for a layout the spans the entire width:
<div></div>
What’s wrong with the following Bootstrap code?
<div>
<h2>Here is my heading</h2>
</div>
Columns, and only columns, are placed inside the Row.
Content is placed inside the Columns.
<div>
<div>Happy :-) This is the right way.</div>
</div>
What is a Bootstrap gutter?
Space between each column. To have none, make a no-gutters class and assign to the row..
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
<div>
<div>.col-12 .col-sm-6 .col-md-8</div>
<div>.col-6 .col-md-4</div>
</div>
What happens if you put more than 12 columns per row?
<div>
<div>.col-9</div>
<div>.col-4<br></br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div>.col-6<br></br>Subsequent columns continue along the new line.</div>
</div>
Bootstrap order classes:
<div class="container">
<div class="row">
<div class="col">
First
</div>
<div class="col order-12">
Second
</div>
<div class="col order-1">
Third
</div>
</div>
</div>First Third Second
What are order-first and order-last?
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.
Output:
Third Second First
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
What’s this Bootstrap code do?
<div>
<div>.col-md-4</div>
<div>.col-md-4 .offset-md-4</div>
</div>
<div>
<div>.col-md-3 .offset-md-3</div>
<div>.col-md-3 .offset-md-3</div>
</div>
<div>
<div>.col-md-6 .offset-md-3</div>
</div>
responsive .offset- grid classes
CMD4 CMD4
CM3 CM3
CMD603
==============
4 (blank 4) 4
(blank 3) 3 (blank 3) 3
(blank 3) 6
Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
These classes increase the left margin of a column by * columns. For example, .col-md-offset-2 moves .col-md-2 over four columns. .col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
