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: |
Opening Hours
Useful links
© Copyrights www.arianet.ca
2007 -