Overview

Recently, I'm making a front using Bootstrap. Here is a summary of the classes I have used so far as a memorandum for myself.

reference Bootstrap (ver. 4.5) : https://getbootstrap.jp/

breakpoint

sm : 576px
md : 768px
lg : 992px
xl : 1200px

Layout

container

Fixed width container
Maximum width changes for each breakpoint

row

Factors that determine the rows of the grid system
Demonstrate the true value by having col in the child

col

Factors that determine the columns of the grid system
Used as a child element of row
col-sm-3
sm: Vertically less than 576px
3: (3/12 = 25% width)

button

btn

Make a button

btn-primary

Make a blue-based button
danger: red base
secondary: gray base

padding, margin p, m

p : padding
m : margin

direction

t : top
b : bottom
l : left
r : right
x: left and right (x-axis direction)
y: top and bottom (y direction)
(blank): 4 directions
Example): pt- ○: padding-top: ○;

size

Determined by the ratio to $ spacer. 1rem = 16px by default
0 : $spacer * 0 (=0)
1 : $spacer * 0.25 (=4px)
2 : $spacer * 0.50 (=8px)
3 : $spacer * 0.75 (=12px)
4 : $spacer * 1.00 (=16px)
5 : $spacer * 1.25 (=20px)
auto : margin: auto;
Example): pt-1: padding-top: 4px;

The following are typical examples shown in Bootstrap Official Reference .

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

By the way, if you add **! Important, you can apply the style regardless of the reading order of the CSS file **.

color

primary: blue
secondary: light gray
success: green
danger: red
warning: yellow
info: Light blue
light: fairly light gray
dark: dark gray

[RAILS] [Bootstrap] Basic class summary