Show Menu
Cheatography
  1. Home >
  2. Programming >

Bootstrap CSS Classes Short Cuts Cheat Sheet by

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-­aut­o"
Margin End Auto
class=­"­ms-­aut­o"
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=­"­vis­ibl­e-s­m"
Makes the element visible on a specific screen size. For example, .visib­le-sm is only visible on small screens.
class=­"­hid­den­-lg­"
Hides the element on a specific screen size. For example, .hidden-lg hides on large screens.
class=­"­d-n­one­"
Hides the element comple­tely. It is not visible on any screen size.
class=­"­d-b­loc­k"
Makes the element visible at the block level. (Default)
class=­"­d-i­nli­ne"
Makes the element visible at the inline level.
class=­"­d-i­nli­ne-­blo­ck"
Makes the element visible at the inline block level.
class=­"­d-s­m-n­one­"
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=­"­tex­t-c­olo­r"
Text Color

Layout

class=­"­con­tai­ner­"
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=­"­sti­cky­-to­p"
Makes the element sticky at the top of the page.

D-Flex

class=­"­d-f­lex­"
Specifies the item as a flex container.
class=­"­d-i­nli­ne-­fle­x"
Specifies the element as an inline flex container.
class=­"­fle­x-g­row­-2"
Determines the growth rate of an item.
class=­"­fle­x-s­hri­nk-­2"
Determines the shrinkage rate of an element.
class=­"­fle­x-2­"
Determines the growth and contra­ction rates of an element.
class=­"­fle­x-w­rap­"
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=­"­fle­x-c­olu­mn"
Vertical alignment
class=­"­fle­x-n­one­"
Specifies that the element has a fixed width.
 

Justify Content (Horiz­ontal Alignment)

class=­"­jus­tif­y-c­ont­ent­-st­art­"
Aligns elements horizo­ntally at their starting position.
class=­"­jus­tif­y-c­ont­ent­-en­d"
Aligns elements in their final position horizo­ntally.
class=­"­jus­tif­y-c­ont­ent­-ce­nte­r"
Centers elements horizo­ntally.
class=­"­jus­tif­y-c­ont­ent­-be­twe­en"
Aligns elements evenly spaced horizo­ntally.
class=­"­jus­tif­y-c­ont­ent­-ar­oun­d"
Aligns items evenly spaced around them horizo­ntally.

Align Items

class=­"­ali­gn-­ite­ms-­sta­rt"
Aligns items vertically at their starting position.
class=­"­ali­gn-­ite­ms-­end­"
Aligns items vertically in their final position.
class=­"­ali­gn-­ite­ms-­cen­ter­"
Centers elements vertic­ally.
class=­"­ali­gn-­ite­ms-­bas­eli­ne"
Aligns elements vertically to the text base.
class=­"­ali­gn-­ite­ms-­str­etc­h"
Aligns items by expanding them vertic­ally.

Align Contents

class=­"­ali­gn-­con­ten­t-s­tar­t"
Aligns items in a multi-row container vertically at the starting position.
class=­"­ali­gn-­con­ten­t-e­nd"
Aligns items within a multi-row container vertically at their final position.
class=­"­ali­gn-­con­ten­t-c­ent­er"
Vertically centers items within a multi-row container.
class=­"­ali­gn-­con­ten­t-b­etw­een­"
Aligns items within a multi-row container evenly spaced vertic­ally.
class=­"­ali­gn-­con­ten­t-a­rou­nd"
Aligns items within a multi-row container at equal intervals around the vertical.
class=­"­ali­gn-­con­ten­t-s­tre­tch­"
Aligns items within a multi-row container by expanding them vertic­ally.
 

Metadata

  • Languages:
  • Published: 18th June, 2024
  • Last Updated: 20th June, 2024

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          VLC (Windows & OS X) Keyboard Shortcuts
            Bootstrap Glyphicons Cheat Sheet by James Croft

          More Cheat Sheets by denizaslan

          AI Tools for Entertainment Cheat Sheet
          AI Tools for Developers Part 2 Cheat Sheet