May 2021
🔨 Overview and exemple with "Easy Job" site. From Udemy Bootstrap en partant de Zéro - Enzo Ustariz.
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
- Title and Typography
- Alignment and Display
- Marge, Padding
- Colors and Backgrounds
- Size and Borders
- Floats and Fixed position
- Images
- Grid
- Alignment
- Flexbox
- Margin, Wrap and Order
- Buttons
- Navbars
- Lists
- Forms
- Inputs
- The tables
- The cards
- Jumbotron
- Alerts
- Progress bars
- Carousel
- Collapse
- Popover & Tooltips
- Modals
- Scroll
Body default:
font-size: 16px; /*1rem**/
line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;What is the default size of h1 Bootstrap heading? 2.5rem / 40px
What is the default size of h2 Bootstrap heading? 2rem / 32px
What is the default size of h3 Bootstrap heading? 1.75rem / 28px
What is the default size of h4 Bootstrap heading? 1.5rem / 24px
What is the default size of h5 Bootstrap heading? 1.25rem / 20px
.display-1 6rem / 90px
.display-2 5.5r / 82.5px
.display-3 4.5rem / 67.5px
.display-4 3.5rem / 52.5px
Extra small: <576px
Small: ≥576px et <768px
Medium: ≥768px et <992px
Large: ≥992px et <1200px
Extra large: ≥1200px
Note:
The "col-xs-" class does not exist, when we switch to extra-small mode, below 576px, we directly put col-x to define the number of columns in extra small.
Ex:
<div class="col-6 col-sm-4 col-md-6 col-lg-10"></div>So this div will take: 6 columns in extra small, 4 in small, 6 in medium and finally 10 in Large.