[Bootstrap] Basic class summary

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