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).
What does the following code do? <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.
Each row will become stacked lower than md size (<750px) (xs and sm are stacked) .col-xs- .col-sm-
Describe the difference between .container and .container-fluid.
Use .container-fluid when you want your page to shapeshift with every little difference in its viewport size.
Use .container when you want your page to shapeshift to only 5 kinds of sizes, which are also known as “breakpoints”.
)
What does the following code do?
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="service-items">
<div class="icon">
<span class="glyph"></span>
</div>
</div>
</div>
One column for xs displays.
Two columns for sm displays
Four columns for md and larger displays.
Screen sizes in Bootstrap.
Screen sizes generally use the min-width condition. Default is extra-small, for example col-6 is half viewport at any viewport size (it’s like col-xs-6)
Extra small (under 576px) - no media query because styling gets overwritten by media queries for bigger sizes. (example: col-6 takes up half viewport any size)
.col-sm-6 - will span 1/2 viewport above 576px. Will span full width below.
.col-md-6 will span 1/2 viewport above 768px and full width below that.
.col-lg-6 will span 1/2 viewport above 992px, full width below.
.col-xl-6 will span 1/2 viewport above 1200px, full width below
.col-xl-6
What’s this do?
.d-none .d-md-block .d-xl-none
.d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices. To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example.
What’s this code do?
.d-md-none .d-lg-block
Hidden only on md
What’s this do?
.d-none .d-md-block .d-lg-none
Visible only on md
How would you hide on screens wider than lg
<div>hide on screens wider than lg</div>
How do you hide on screens smaller than lg
<div>hide on screens smaller than lg</div>
Using Bootstrap, how would you show something on screen only, but not during printing?
<div>Screen Only (Hide on print only)</div>
Using Bootstrap, how to show something only in print view but not on screen?
<div>Print Only (Hide on screen only)</div>
Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div><div>
<div>
<div>.col-12 .col-md-8</div>
<div>.col-6 .col-md-4</div>
</div></div>
<div>
<div>.col-6 .col-md-4</div>
<div>.col-6 .col-md-4</div>
<div>.col-6 .col-md-4</div>
</div>
Use flexbox alignment utilities to vertically align columns. Vertical alignment of flex items when the flex container (row) has a min-height.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
-----------------Assuming row has min-height set, what will this do?
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>three column row. First column begins at top, second in middle, third at end.
- --
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>Two columns in a row, justified to the left (start)
COL-1 COL-2 blank9
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>Two columns centered in a row.
blank-2 col-4 col4 blank-2
