Bootstrap Code Snippets

1 - Intro & Setup

Show Image

2 - Bootstrap 5 New Features

Dropped jQuery
Forms revamped
RTL support
New utility classes added:
- positioning
- font size
- border radius
Changes in Grid layout
Jumbotron
Bootstrap Icons
New components:
- Offcanvas
- Accordion

3 - Colors & Typography

3.1 Heading tags

Show Image

3.2 Display headings

Show Image

3.3 Lead text and Alignment

Show Image

3.4 Text decoration and font weight

Show Image

3.5 Text Colors

Show Image

3.6 Background colors

Show Image

4 - Buttons & Button Groups

4.1 Basic Buttons

4.2 Links as Buttons

info anchor tag danger anchor tag success anchor tag

4.3 Button Sizes

4.4 Button Styles (outlined Button)

4.5 Button Groups

5 - Utility Classes

5.1 Margin and Padding

small margin and padding

large margin and padding

margin in x direction and padding in y direction

m&p in each direction. mt: top. ms: start (left) me: end (right) mb: bottom

5.2 Borders

default border

border on top and right (end)

border on start(left) and bottom with color (end)

thicker border

rounded corner

rounded pill corner

rounded corner on secondary

5.3 Box Shadow

element with small box shadow

element with large box shadow

5.4 Font Weight

bold text

bolder text

normal text

light text

italic font style

italic font style with lighter font-weight

6 - Containers

Show XS

Show SM

Show MD

Show LG

Show XL

Show XXL

7 - Grid Layout

container -> row -> column.

7.1 Basic Grid

by default each column inside the row will take up the space equally.

col 1

col 2

col 3

7.2 Column Widths

sum up to 12

col 1

col 2

col 3

7.3 Responsive Column Width

on xs: 12,12,12 , on sm: 4,4,4 , on lg: 6,3,3

col 1

col 2

col 3

7.4 Justifying Columns

7.4.1 justify-content-start

col 1

col 2

7.4.2 justify-content-end

col 1

col 2

7.4.3 justify-content-center

col 1

col 2

7.4.4 justify-content-between

col 1

col 2

7.4.5 justify-content-around

col 1

col 2

7.4.6 justify-content-evenly

col 1

col 2

7.5 Navbar

navbar-expand-md: until middle we show toggle button, starting from middle we start show the actual expanded button
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"> are for screen reader

7.6 Main Image & Intro Text

container-lg: keep 100% width until lg screen.
text-center text-center-start: center the text on smaller screens, change to start on medium
text-muted: more gray color
d-none d-md-block: for smaller screen it dose not show until the middle, the middle show it as a block
in row: align-items-center : center the elements inside row

Black-Belt

Your coding skills

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi deserunt ducimus exercitationem expedita ipsam ipsum iste iusto magni, maxime mollitia nam odio officia quae reiciendis repellat rerum ut, velit. Perspiciatis?

Buy Now

7.7 Pricing Plans

g-0 : removes the gap between the cols (in this example the cards)

Pricing plans

Choose a pricing plan to suit you.

Starter Edition

eBook download only

$12.99

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque illo, nostrum! Doloremque!

Buy Now

Bootstrap Code Snippets

1 - Intro & Setup

2 - Bootstrap 5 New Features

3 - Colors & Typography

3.1 Heading tags

3.2 Display headings

3.3 Lead text and Alignment

3.4 Text decoration and font weight

3.5 Text Colors

3.6 Background colors

4 - Buttons & Button Groups

4.1 Basic Buttons

4.2 Links as Buttons

4.3 Button Sizes

4.4 Button Styles (outlined Button)

4.5 Button Groups

5 - Utility Classes

5.1 Margin and Padding

5.2 Borders

5.3 Box Shadow

5.4 Font Weight

6 - Containers

7 - Grid Layout

7.1 Basic Grid

7.2 Column Widths

7.3 Responsive Column Width

7.4 Justifying Columns

7.4.1 justify-content-start

7.4.2 justify-content-end

7.4.3 justify-content-center

7.4.4 justify-content-between

7.4.5 justify-content-around

7.4.6 justify-content-evenly

7.5 Navbar

7.6 Main Image & Intro Text

7.7 Pricing Plans

7.8 Topics at a glance

7.9 Review List