Bootstrap 5 Tutorial
Bootstrap is the most popular front end framework that uses HTML, CSS and Javascript. It is powerful mobile first front-end framework for faster and easier web development.
Bootstrap Interactions
These are utility classes that change how users interact with contents of a website. Interactions include text selection and pointer events.
How to Style Links in Bootstrap
Link utilities are used to style your anchors to adjust their color, opacity, underline offset, underline color, and more.
How to Add Opacity in Bootstrap
You can easily control the opacity of elements in Bootstrap. The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.
Bootstrap Position Utility Classes
You can use these shorthand utilities for quickly configuring the position of an element.
How to Add Shadow in Bootstrap
There are four utility classes to add or remove shadows to elements. You can quickly add or remove a shadow with box-shadow utility classes.
Bootstrap Sizing: Width and Height
You can easily make an element as wide or as tall with width and height utilities. The classes include for 25%, 50%, 75%, 100%, and auto.
Bootstrap Spacing: Margin, Padding and Gap
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
Bootstrap Text Utilities
You can use common text utilities to control alignment, wrapping, word break, transform, font size, weight, and more.
How to Add Borders using Bootstrap
You can quickly style the border and border-radius of an element. It can be used for images, buttons, blocks or any other element.
Bootstrap Contextual Colors and Backgrounds
Bootstrap has contextual classes that is used to provide meaning through colors.
Bootstrap Horizontal Form
You can create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.
How to Create Forms using Bootstrap
A form contains many fields (also known as form controls) with optional labels and submit button. You should use appropriate type attribute on all inputs (email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Bootstrap Form Range
You can style <input type="range"> controls with .form-range class. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
Bootstrap Form Checkbox and Radio
Browser default checkbox and radio are replaced with the help of .form-check class for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency.
Bootstrap Form Select
You can customize the native <select> with custom CSS that changes the element's initial appearance. Just, add the class form-select (instead of form-input) to trigger the custom styles to the <select> element.
Bootstrap Form Controls
Bootstrap form controls give textual form controls like <input> and <textarea> an upgrade with custom styles, sizing, focus states, and more.
How to Style Images using Bootstrap
Bootstrap provides classes that can be used to apply styles to the images. These images turn into responsive behavior, so they never become larger than their parent elements.
How to Format Tables Using Bootstrap
Bootstrap provides a nice and clean layout for building tables. If you want some light padding and horizontal dividers, add the base class: .table to <table> element. Along with the base table class, you can use additional classes to style the table.
Bootstrap Typography Classes
Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
Bootstrap Grid System
The basis of the Bootstrap framework relies in its grid system. Bootstrap offers components that allow to structure a website in a responsive grid layout.
Bootstrap Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
Bootstrap Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. They are the triggers for layout changes.
How to Include Bootstrap from CDN
Bootstrap is the world's most popular framework for building responsive, mobile-first websites. You can include Bootstrap in your web pages from a Content Delivery Network (CDN).
Bootstrap Breadcrumbs
Breadcrumbs are used to indicate the current page's location within a navigational hierarchy. A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. The hierarchy is created as ordered list.
How to Create Offcanvas using Bootstrap
Offcanvas is hidden sidebar which can contain navigation links, shopping cart, and more. Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.
Bootstrap Alerts
Alerts provide contextual feedback messages for typical user actions. For proper styling, use one of the required contextual classes. Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Bootstrap Progress Bars
Bootstrap uses the .progress as a wrapper to indicate the max value of the progress bar. Use the inner .progress-bar to indicate the progress so far. The .progress-bar also requires some role and aria attributes to make it accessible. Bootstrap does not uses the HTML5 <progress> element.
Bootstrap Toasts
Toast is a push notifications to your visitors with a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They are built with flexbox.
Creating Navs Using Bootstrap
Navigation available in Bootstrap share general markup and styles, from the base .nav class. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It is generated by using unordered list element with each list element containing anchors.
Bootstrap Carousel
Carousel is a slideshow for cycling through series of content - images or slides of text. It also includes support for previous or next controls and indicators.
How to Create Content Cards using Bootstrap
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards replaced panels, wells, and thumbnails from earlier bootstrap versions.
How to Create Buttons using Bootstrap
You can apply button classes for hyperlinks (<a>), button elements (<button>), and inputs (<input>). You need to add class .btn to make a link or element look like a button. Bootstrap provides many options to style buttons.
Bootstrap Badges
Badges are used for small count and labeling. Badges scale to match the size of the immediate parent element. Badges can be used as part of links or buttons to provide a counter.
Bootstrap Navs
The base .nav class provides a strong foundation for building all types of navigation. You can use this class with <ul> element, <ol> element or with a <nav> element. Similar to navbar, add class .nav-item to <li> tag and .nav-link to <a> tag.
How to Create Navigation Bar using Bootstrap
To start with, navbars require three things - a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes. You can use spacing and flex utility classes for controlling spacing and alignment within navbars.