Bootstrap is a CSS and UI framework that web developers can use quickly and effectively. Bootstrap simplifies the design and layout of web pages by offering ready-made components and style templates that come with predefined CSS classes. You can use the classes after importing Bootstrap into your project. Some classes can be used by pre-defining them.
|
class="m-2 "
|
Margin
|
|
class="mt-2 "
|
Margin Top
|
|
class="mb-2 "
|
Margin Bottom
|
|
class="ml-2 "
|
Margin Left
|
|
class="mr-2 "
|
Margin Right
|
|
class="me-2"
|
Margin End
|
|
class="ms-2"
|
Margin Start
|
|
class="me-auto"
|
Margin End Auto
|
|
class="ms-auto"
|
Margin Start Auto
|
|
class="p-2"
|
Padding
|
|
class="pt-2"
|
Padding Top
|
|
class="pb-2"
|
Padding Bottom
|
|
class="pl-2"
|
Padding Left
|
|
class="pr-2"
|
Padding Right
|
|
class="py-2"
|
Vertical Padding
|
|
class="px-2"
|
Horizontal Padding
|
|
class="pe-2"
|
Padding End
|
|
class="ps-2"
|
Padding Start
|
|
class="visible-sm"
|
Makes the element visible on a specific screen size. For example, .visible-sm is only visible on small screens.
|
|
class="hidden-lg"
|
Hides the element on a specific screen size. For example, .hidden-lg hides on large screens.
|
|
class="d-none"
|
Hides the element completely. It is not visible on any screen size.
|
|
class="d-block"
|
Makes the element visible at the block level. (Default)
|
|
class="d-inline"
|
Makes the element visible at the inline level.
|
|
class="d-inline-block"
|
Makes the element visible at the inline block level.
|
|
class="d-sm-none"
|
Hides the element on a specific screen size.
|
|
class="w-2"
|
Width
|
|
class="mw-2"
|
Max-Width
|
|
class="min-w-2"
|
Min-Width
|
|
class="h-2"
|
Height
|
|
class="mh-2"
|
Max-Height
|
|
class="min-h-2"
|
Min-Height
|
|
class="lh-2"
|
Line Height
|
|
class="fw-2"
|
Font Weight
|
|
class="fs-2"
|
Font Size
|
|
class="text-color"
|
Text Color
|
|
class="container"
|
Creates a content container.
|
|
class="row"
|
Creates a line.
|
|
class="col-sm"
|
Creates a column.
|
|
class="gap"
|
Determines the space between Margin and Padding
|
|
class="sticky-top"
|
Makes the element sticky at the top of the page.
|
|
class="d-flex"
|
Specifies the item as a flex container.
|
|
class="d-inline-flex"
|
Specifies the element as an inline flex container.
|
|
class="flex-grow-2"
|
Determines the growth rate of an item.
|
|
class="flex-shrink-2"
|
Determines the shrinkage rate of an element.
|
|
class="flex-2"
|
Determines the growth and contraction rates of an element.
|
|
class="flex-wrap"
|
When sorting items in a flex container, it allows them to slide to the next line if they do not fit on the screen.
|
|
class="flex-column"
|
Vertical alignment
|
|
class="flex-none"
|
Specifies that the element has a fixed width.
|
|
class="justify-content-start"
|
Aligns elements horizontally at their starting position.
|
|
class="justify-content-end"
|
Aligns elements in their final position horizontally.
|
|
class="justify-content-center"
|
Centers elements horizontally.
|
|
class="justify-content-between"
|
Aligns elements evenly spaced horizontally.
|
|
class="justify-content-around"
|
Aligns items evenly spaced around them horizontally.
|
|
class="align-items-start"
|
Aligns items vertically at their starting position.
|
|
class="align-items-end"
|
Aligns items vertically in their final position.
|
|
class="align-items-center"
|
Centers elements vertically.
|
|
class="align-items-baseline"
|
Aligns elements vertically to the text base.
|
|
class="align-items-stretch"
|
Aligns items by expanding them vertically.
|
|
class="align-content-start"
|
Aligns items in a multi-row container vertically at the starting position.
|
|
class="align-content-end"
|
Aligns items within a multi-row container vertically at their final position.
|
|
class="align-content-center"
|
Vertically centers items within a multi-row container.
|
|
class="align-content-between"
|
Aligns items within a multi-row container evenly spaced vertically.
|
|
class="align-content-around"
|
Aligns items within a multi-row container at equal intervals around the vertical.
|
|
class="align-content-stretch"
|
Aligns items within a multi-row container by expanding them vertically.
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
