Bootstrap embeds is a utility that helps you insert video or slideshow in the page keeping width of the parent and scales on any device.
Bootstrap: Utilities “Embed”
Tag: What
Bootstrap: Utilities “Display”
Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.
| Screen Size | Class |
| Hidden an element | .d-none |
| Hides an element on a specific screen size | .d-*-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| An element inline | .d-inline |
| An element inline on a specific screen size | .d-*-inline |
| An element inline-block | .d-inline-block |
| An element inline-block on a specific screen size | .d-*-inline-block |
| An Element display as a table | .d-table |
| An element display as a table on a specific screen size | .d-*-table |
| An element display as a table cell | .d-table-cell |
| An element display as a table cell on a specific screen size | .d-*-table-cell |
| An element display as a table row | .d-table-row |
| An element display as a table row on a specific screen size | .d-*-table-row |
| Creates a flexbox container and transforms direct children into flex items | .d-flex |
| Creates a flexbox container on a specific screen size | .d-*-flex |
| Creates an inline flexbox container | .d-inline-flex |
| Creates an inline flexbox container on a specific screen size | .d-*-inline-flex |
Syntax:-
<div class="container mt-4">
<h2>Display Inline Block</h2>
<p>Use the d-inline-block class.</p>
<div class="d-inline-block">Inline block DIV.</div>
<div class="d-inline-block">Inline block DIV.</div>
</div>
Bootstrap: Utilities “Color”
Check the enhanced Bootstrap 4 Text colors — Convey meaning through color with a handful of color utility classes.
The classes for text colors are:
:- .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light.
The classes for background colors are:
:- .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Bootstrap: Utilities “Close icon”
Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code. Use the .close class to style a close icon.
<div class="clearfix">
<button type="button" class="close">×</button>
</div>
Bootstrap: Utilities “Borders”
Bootstrap 4 has a lot of utility classes to quickly style elements. With no using CSS code.
Borders:-
This class adds a border all around the element.
- Borders by using the border classes to add or remove borders from an elements.
- Border Color by using border border-colorname to and color to the borders.
- Border Radius by using rounded classes to rounded the corners.
Bootstrap: Components & Utilities
Bootstrap:-Component “Toast”
The toast component is used for showing a couple of seconds of a message when something happens. It works the same as an alert box.
How To Create a Toast:-
- first use toast class
- Then, add a toast-header class
- And finally use toast-body class inside it type text declare.
- Use the data-autohide=”false” attribute to show it by default toasts.
Bootstrap:-Component “Spinners”
Bootstrap “spinners” is used to display the loading state in your projects.
How can a spinner be:-
- Colored Spinners by using <div class=”spinner-border text-primary”></div>.
- Growing Spinners by using <div class=”spinner-grow text-danger”></div>.
- Spinner Size by using <div class=”spinner-border spinner-border-sm”></div>.
- Spinner Buttons by using inside button tag <span class=”spinner-border spinner-border-sm”></span>.
Bootstrap:-Component “Popovers”
A popover is similar to the tooltip, offering an extended view complete with a heading. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. Note:- Popovers must be initialized with jQuery.
- Enable Popovers everywhere by using the attribute data-placement=top|bottom|left|right
- Dismiss on next click by using the attribute data-trigger=”focus”.
Bootstrap Component:- “Pagination”
Pagination is a component in bootstrap that is used to enable navigation between pages in a website. It is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner.
Pagination uses:-
- Working with icons by using class=sr-only (previous/next) utility.
- Disabled and active states by using class=disable/active to indicate the current page.
- Sizing by using .pagination-lg|sm for additional sizes.
- Alignment by .justify-content-center|end.
- Breadcrumbs by using .breadcrumb and .breadcrumb-item classes.
