Cheatography
https://cheatography.com
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.
Margins
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 |
Paddings
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 |
Visibility and Hiding
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. |
|
|
Width and Height
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 |
Font Style
class="fw-2" |
Font Weight |
class="fs-2" |
Font Size |
class="text-color" |
Text Color |
Layout
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. |
D-Flex
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. |
|
|
Justify Content (Horizontal Alignment)
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. |
Align Items
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. |
Align Contents
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. |
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by denizaslan