514 825-6031
What is Bootstrap
What is Bootstrap? Bootstrap is a potent front-end framework used to create modern websites and web apps. It's open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.
Keyword
1 col
Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
2 .h
Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size.
3 .mx-auto .d-block
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:
4 accordion
he following example shows a simple accordion by extending the card component.
5 active
The .active class is used to "highlight" the current page
6 alert-dismissible
To close the alert message, add a .alert-dismissible class to the alert container. Then add class="btn-close" and data-bs-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).
7 alert-link
Add the .alert-link class to any links inside the alert box to create "matching colored links"
8 alert-[color]
Alerts are created with the .alert class, followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark
9 align
Use the align- classes to change the alignment of elements (only works on inline, inline-block, inline-table and table cell elements)
10 align-content-[place]
Control the vertical alignment of gathered flex items with the .align-content-* classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.
11 align-items=[place]
Control the vertical alignment of single rows of flex items with the .align-items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).
12 align-self
Control the vertical alignment of a specified flex item with the .align-self-* classes. Valid classes are .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).
13 badge
Use the .badge class together with a contextual class (like .bg-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any)
14 badge rounded-pill
Use the .rounded-pill class to make the badges more round
15 bg
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
16 border
Use the border classes to add or remove borders from an element:
17 border-[color]
Add a color to the border with any of the contextual border color classes:
18 breadcrumb
The .breadcrumb and .breadcrumb-item classes indicates the current page's location within a navigational hierarchy
19 btn btn-[color]
Bootstrap 5 provides different styles of buttons
20 btn btn-[size]
Use the .btn-lg class for large buttons or .btn-sm class for small buttons
21 btn-block
To create a block level button that spans the entire width of the parent element, use the .d-grid "helper" class on the parent element:
22 btn-group
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group
23 btn-group-vertical
Use the class .btn-group-vertical to create a vertical button group
24 btn-group-[size]
The button sizes to every button in a group, use class
25 card
A basic card is created with the .card class, and content inside the card has a .card-body class
26 card-body
Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body
27 card-header
The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card
28 card-img-overlay
Turn an image into a card background and use .card-img-overlay to add text on top of the image
29 card-img-[place]
Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width
30 card-link
The .card-link class adds a blue color to any link, and a hover effect
31 card-text
The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body
32 card-title
Use .card-title to add card titles to any heading element
33 carousel
The following example shows how to create a basic carousel with indicators and controls
34 clearfix
Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class
35 col
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
36 collapse
Collapsibles are useful when you want to hide and show large amount of content:
37 collapse show
By default, the collapsible content is hidden. However, you can add the .show class to show the content by default
38 container
The .container class provides a responsive fixed width container
39 container-fluid
Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%):
40 container-[size]
You can also use the .container-sm|md|lg|xl classes to determine when the container should be responsive.
41 d-flex
To create a flexbox container and to transform direct children into flex items, use the d-flex class
42 d-inline-flex
To create an inline flexbox container, use the d-inline-flex class
43 data-bs-placement
Use the data-bs-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element:
44 datalist
Bootstrap will also style data lists, which is a list of pre-defined options for an <input> element:
45 disabled
The .disabled class is used for un-clickable links
46 display
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are six classes to choose from: .display-1 to .display-6
47 dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
48 dropdown dropend
dd the .dropend class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically
49 dropdown dropstart
Add the .dropstart class next to the dropdown menu to left-align the dropdown. Note that the caret/arrow is added automatically
50 dropdown-divider
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border
51 dropdown-header
The .dropdown-header class is used to add headers inside the dropdown menu
52 dropdown-item-text
The .dropdown-item-text class is used to add plain text to a dropdown item, or used on links for default link styling.
53 dropdown-menu-end
To right-align the dropdown menu, add the .dropdown-menu-end class to the element with .dropdown-menu
54 dropdown-toggle
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-bs-toggle="dropdown" attribute.
55 dropup
If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup"
56 fade
The .fade and .show classes adds a fading effect when closing the alert message:
57 fade
Use the .fade class to add a fading effect when opening and closing the modal
58 flex-column
Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse to reverse the vertical direction
59 flex-fill
Use .flex-fill on flex items to force them into equal widths:
60 flex-grow-[size]
Use .flex-grow-1 on a flex item to take up the rest of the space. In the example below, the first two flex items take up their necessary space, while the last item takes up the rest of the available space
61 flex-nowrap
Control how flex items wrap in a flex container with .flex-nowrap
62 flex-row
Use .flex-row to display the flex items horizontally (side by side). This is default
63 flex-row-reverse
Use .flex-row-reverse to right-align the horizontal direction
64 flex-shrink-1
Use .flex-shrink-1 on a flex item to make it shrink if necessary.
65 flex-wrap
Control how flex items wrap in a flex container with .flex-wrap
66 flex-wrap-reverse
Control how flex items wrap in a flex container with .lex-wrap-reverse
67 float-end
Float an image to the left with the .float-start class or to the right with .float-end
68 float-start
Float an image to the left with the .float-start class or to the right with .float-end
69 form-check
heckboxes are used if you want the user to select any number of options from a list of preset options.
70 form-check (radio buttons)
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
71 form-control
All textual <input> and <textarea> elements with class .form-control get proper form styling:
72 form-control-color
To style an input with type="color" properly, use the .form-control-color class
73 form-control-plaintext
Use the .form-control-plaintext class to style an input field without borders, but keep proper marigins and padding:
74 form-control-[size]
You can change the size of .form-control inputs with .form-control-lg or .form-control-sm
75 form-floating
By default, when using labels, they normally appear on top of the input field:
76 form-range
o style a range menu, add the .form-range class to the input element with type="range"
77 form-select
Select menu
78 form-select-[size]
Use the .form-select-lg or .form-select-sm class to change the size of the select menu:
79 form-switch
If you want your checkbox to be styled as a toggle switch, use the .form-switch class together with the .form-check container:
80 h-[size]
Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100):
81 img-fluid
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen
82 img-thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered)
83 initialism
Displays the text inside an <abbr> element in a slightly smaller font size
84 input-group-text
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".
85 input-group-[size]
Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups
86 input-group[Multiple Inputs and Helpers]
Multiple Inputs and Helpers
87 justify-content-[alignment]
Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around
88 lead
Use the .lead class to make a paragraph "stand out"
89 list-group
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:
90 list-group-flush
Use the .list-group-flush class to remove some borders and rounded corners
91 list-group-horizontal
If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the .list-group-horizontal class to .list-group
92 list-group-item
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:
93 list-group-item list-group-item-[color]
The classes for coloring list-items
94 list-group-item-action
To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>. Optionally, add the .list-group-item-action class if you want a grey background color on hover
95 list-group-numbered
Use the .list-group-numbered class to create list items with numbers in front of them
96 list-inline
Places all list items on a single line (used together with .list-inline-item on each <li> elements)
97 list-unstyled
Removes the default list-style and left margin on list items (works on both <ul> and <ol>).
98 m , p
Bootstrap 5 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
99 mark
Use the mark element to highlight text.
100 modal
The Modal component is a dialog box/popup window that is displayed on top of the current page:
101 modal-dialog
Add the size class to the <div> element with class .modal-dialog
102 modal-dialog-scrollable
Modal Scroll Example
103 modal-fullscreen
If you want the modal to span the whole width and height of the page, use the .modal-fullscreen class:
104 modal-fullscreen-[size]-[place]
You can also control when the modal should be in fullscreen, with the .modal-fullscreen-*-* classes:
105 ms-auto
Easily add auto margins to flex items with .ms-auto (push items to the right), or by using .me-auto (push items to the left
106 mx-auto
Center an element with the .mx-auto class (adds margin-left and margin-right: auto)
107 nav
If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links
108 nav-item
If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:
109 nav-justified
Justify the tabs/pills with the .nav-justified class (equal width)
110 nav-link
If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:
111 nav-pills
Turn the nav menu into navigation pills with the .nav-pills class. If you want the pills to be togglable, see the last example on this page.
112 nav-tabs
Turn the nav menu into navigation tabs with the .nav-tabs class. Add the .active class to the active/current link. If you want the tabs to be togglable, see the last example on this page.
113 navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
114 navbar-brand
The .navbar-brand class is used to highlight the brand/logo/project name of your page:
115 navbar-expand-*
Remove the .navbar-expand-* class to create a navigation bar that will always be vertical
116 navbar-expand-[size]
You can also include forms inside the navigation bar.
117 navbar-text
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).
118 offcanvas
The following example shows how to create an offcanvas sidebar
119 order
Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 5, where the lowest number has highest priority (order-1 is shown before order-2, etc..):
120 pagination
To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>:
121 pagination justify-content-[aligment]
Use utility classes to change the alignment of the pagination
122 pagination-[size]
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
123 popover
To create a popover, add the data-bs-toggle="popover" attribute to an element.
124 progress
A progress bar can be used to show how far a user is in a process.
125 progress-bar
The height of the progress bar is 1rem (usually 16px) by default. Use the CSS height property to change it. Note that you must set the same height for the progress container and the progress bar:
126 progress-bar-animated
dd the .progress-bar-animated class to animate the progress bar
127 progress-bar-striped
Use the .progress-bar-striped class to add stripes to the progress bars
128 ratio
Add the .ratio class together with an aspect ratio of your choice .ratio-* to a parent element, and add the embed (video or iframe) inside of it
129 rounded
The .rounded class adds rounded corners to an image
130 rounded
Add rounded corners to an element with the rounded classes:
131 rounded-circle
The .rounded-circle class shapes the image to a circle
132 row
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
133 scroll
The following example shows how to create a scrollspy
134 shadow
Use the shadow- classes to add shadows to an element
135 show
The .fade and .show classes adds a fading effect when closing the alert message:
136 small
The small element (and the .small class) is used to create a smaller, secondary text in any heading
137 spinner-border
o create a spinner/loader, use the .spinner-border class:
138 spinner-border text-[color]
Use any text color utilites to add a color to the spinner:
139 spinner-border-sm
Use .spinner-border-sm or .spinner-grow-sm to create a smaller spinner:
140 spinner-grow
Use the .spinner-grow class if you want the spinner/loader to grow instead of "spin"
141 table
The .table class adds basic styling (light padding and horizontal dividers) to a table
142 table table-dark table-hover
The .table-hover class adds a hover effect (grey background color) on table rows
143 table table-dark table-striped
Combine .table-dark and .table-striped to create a dark, striped table
144 table-bordered
The .table-bordered class adds borders on all sides of the table and cells
145 table-borderless
The .table-borderless class removes borders from the table
146 table-dark
The .table-dark class adds a black background to the table
147 table-hover
The .table-hover class adds a hover effect (grey background color) on table rows
148 table-responsive
The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally)
149 table-sm
The .table-sm class makes the table smaller by cutting cell padding in half
150 table-striped
The .table-striped class adds zebra-stripes to a table:
151 table-[color]
Contextual classes can be used to color the table, table rows or table cells.
152 text-break
he .text-break class prevents long text from breaking layout
153 text-capitalize
Capitalized text
154 text-center
Center-aligned text
155 text-decoration-none
Use the .text-decoration-none class to remove the underline from a link.
156 text-end
Right-aligned text
157 text-lowercase
Lowercased text.
158 text-nowrap
No wrap text
159 text-start
Left-aligned text
160 text-uppercase
Uppercased text
161 text[color]
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors
162 toast
o create a toast, use the .toast class, and add a .toast-header and a .toast-body inside of it.
163 tooltip
The following code will enable all tooltips in the document:
164 visible
Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden:
165 visually-hidden
Use the .visually-hidden class to hide an element on all devices, except screen readers
166 w-[size]
Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100):
167 was-validated
In this example, we use .was-validated to indicate what's missing before submitting the form: