This chapter discusses about the aspect ratio. In Bootstrap, aspect ratio is used to maintain the proportions of a responsive element, such as an image or video, relative to its parent container. It is specified using the .ratio class along with a modifier class that represents the desired aspect ratio.
To manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s, use the ratio-* class.
The ratio helper can also be used on standard HTML child element, such as a <div> or <img>
The styles are applied from the parent .ratio class directly to the child element.
The * in the aspect ratio modifier class can be replaceable with:
ratio-21×9: creates a responsive element with a 21:9 aspect ratio
ratio-16×9: creates a responsive element with a 16:9 aspect ratio
ratio-4×3: creates a responsive element with a 4:3 aspect ratio
ratio-1×1: creates a responsive element with a 1:1 aspect ratio
Here’s an example of how aspect ratios are used with the <iframe> element. Here we are using the 16×9 aspect ratio:https://www.tutorialspoint.com/bootstrap/examples/ratio_16x9.php
Example
You can edit and try running this code using the Edit & Run option.
Aspect Ratio 16x9
</h2><hr><div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/4PWVFBiFVVU"
title="YouTube video" allowfullscreen></iframe></div></body></html></pre>
Here's an example of how aspect ratios are used with the <iframe> element. Here we are using the 21x9 aspect ratio:https://www.tutorialspoint.com/bootstrap/examples/ratio_21x9.php
Example
You can edit and try running this code using the Edit & Run option.
In Bootstrap, a custom ratio allows you to define your own aspect ratio for a responsive element using a combination of CSS and JavaScript.
This can be useful if you have a specific aspect ratio that is not covered by the built-in aspect ratio modifier classes. Following example demonstrates by setting --bs-aspect-ratio: 50% on the .ratio.
Example
You can edit and try running this code using the Edit & Run option.
This chapter discusses about configuration of position of an element.
Bootstrap provides a set of helper classes to set the position of an element on a page. Some of the classes provided by Bootstrap are as follows:.
.fixed-top
.fixed-bottom
.sticky-top
.sticky-bottom
Let us see examples for each set of classes.
Fixed top
The class .fixed-top sets the position of an element at the top of the viewport, from edge to edge.
This is useful for creating navigation bars or headers that remain visible at the top of the screen even as the user scrolls down.https://www.tutorialspoint.com/bootstrap/examples/position_fixed_top.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Position - Fixed top</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body style="height:1500px"><nav class="navbar navbar-expand-lg text-bg-success navbar-dark fixed-top"><div class="container-fluid"><a class="navbar-brand" href="#">Use of .fixed-top class</a></div></nav><div class="container-fluid" style="margin-top:80px"><h4>Position fixed at top</h4><p>The class .fixed-top of Bootstrap sets the position of the element at top of the screen.</p><h1>Scroll down the page to see the position</h1></div></body></html>
Fixed bottom
The class .fixed-bottom sets the position of an element at the bottom of the viewport, from edge to edge.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Position - Fixed bottom</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body style="height:1500px"><nav class="navbar navbar-expand-lg text-bg-primary navbar-dark fixed-bottom"><div class="container-fluid"><a class="navbar-brand" href="#">Use of .fixed-bottom class</a></div></nav><div class="container-fluid" style="margin-top:80px"><h4>Position fixed at bottom</h4><p>The class .fixed-bottom of Bootstrap sets the position of the element at the bottom of the page.</p><h1>Scroll down the page to see the position</h1></div></body></html>
Sticky top
The class .sticky-top is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.https://www.tutorialspoint.com/bootstrap/examples/position_sticky_top.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Position - Sticky top</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body style="height:1500px"><div class="container-fluid mt-3"><h3>Sticky Navbar</h3><p>The class <b>.sticky-top</b> is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p><p>Scroll down the page to see the effect.</p></div><nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top"><div class="container-fluid"><a class="navbar-brand" href="#">Sticky top</a></div></nav><div class="container-fluid"><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p></div></body></html>
Responsive sticky top
Responsive sticky top classes are used in web design to create a navigation menu or header that sticks to the top of the screen as the user scrolls down the page. This ensures that the navigation menu is always visible and easily accessible, even as the user moves further down the page.
Some of the responsive sticky top classes provided by Bootstrap are as follows:
.sticky-sm-top sticks the position of element(s) to top on small sized viewports
.sticky-md-top sticks the position of element(s) to top on medium sized viewports
.sticky-lg-top sticks the position of element(s) to top on large sized viewports
.sticky-xl-top sticks the position of element(s) to top on extra large sized viewports
.sticky-xxl-top sticks the position of element(s) to top on extra extra large sized viewports
Let us see an example:
Note: Resize your browser to see the change.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Position - Responsive Sticky top</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body style="height:1500px"><div class="container-fluid mt-3"><h3>Sticky Navbar</h3><p>The class <b>.sticky-lg-top</b> is a responsive class, used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p><p>Scroll down the page to see the effect.</p></div><nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-lg-top"><div class="container-fluid"><a class="navbar-brand" href="#">Responsive Sticky top</a></div></nav><div class="container-fluid"><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p><p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p></div></body></html>
Sticky bottom
The class .sticky-bottom is used to create a sticky element that remains at the bottom of the screen, from edge to edge, but only after you scroll past it.https://www.tutorialspoint.com/bootstrap/examples/position_sticky_bottom.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Position - sticky bottom</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body style=height:1000px class="d-flex flex-column"><!-- Navbar --><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">Sticky Bottom Example</a></div></nav><!-- Content --><div class="container-fluid flex-grow-1"><h4>sticky bottom</h4><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p></div><!-- Sticky Footer --><footer class="footer text-bg-info py-3 sticky-bottom"><div class="container"><span class="display-6 text-dark">Sticky bottom</span></div></footer></body></html>
Responsive sticky bottom
Some of the responsive sticky bottom classes provided by Bootstrap are as follows:
.sticky-sm-bottom sticks the position of element(s) to bottom on small sized viewports
.sticky-md-bottom sticks the position of element(s) to bottom on medium sized viewports
.sticky-lg-bottom sticks the position of element(s) to bottom on large sized viewports
.sticky-xl-bottom sticks the position of element(s) to bottom on extra large sized viewports
.sticky-xxl-bottom sticks the position of element(s) to bottom on extra extra large sized viewports
Let us seen an example for a responsive sticky bottom class:
Note: Resize your browser to see the change.https://www.tutorialspoint.com/bootstrap/examples/position_responsive_sticky_bottom.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Position - Responsive sticky bottom</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body style=height:1000px class="d-flex flex-column"><!-- Navbar --><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">Responsive Sticky Bottom Example</a></div></nav><!-- Content --><div class="container-fluid flex-grow-1"><h4>Responsive sticky bottom</h4><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p><p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p></div><!-- Sticky Footer --><footer class="footer text-bg-warning py-3 sticky-lg-bottom"><div class="container"><span class="display-6 text-dark">Sticky bottom</span></div></footer></body></html>
This chapter discusses about icon links, through which you can stylize the hyperlinks and other icons.
In Bootstrap, an icon link is a link that is accompanied by an icon. The icon can be positioned either before or after the link text, and it is typically used to provide additional context or visual cues to the user.
Icon links can be useful for adding visual interest and interactivity to your website or application, and they can be used in a variety of contexts such as navigation menus, buttons, or calls to action. The default link styles are modified by the icon link helper classes. They automatically align any pairing of icon and text and thus enhance their appearance on the page.
Bootstrap icons along with any icon or image can be used in the icon links.
Icons that are added only with the purpose of decoration, should be hidden from assistive technologies using aria-hidden=”true”.
Icons that are added with purpose of conveying some meaning or information, provide an appropriate text alternative by adding role=”img” along with appropriate aria-label.
style="height: auto; width: auto; display: inline-block; top: 0px;"></a></h1></div></div></nav><div class="container mt-2"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="airplane-fill" viewBox="0 0 16 16"><path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path></symbol></svg><div class="feature col"><h3 class="fs-2 text-success">Icon link example</h3><p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the icon is placed after the text in the icon link.</p><a class="icon-link" href="#">Icon after the text
<svg class="bi" aria-hidden="true"><use xlink:href="#airplane-fill"></use></svg></a></div></body></html></pre>
Style on hover
In order to move the icon in an icon link to right, add the utility class .icon-link-hover to the class .icon-link.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/icon_link_hover.php
Example
You can edit and try running this code using the Edit & Run option.
style="height: auto; width: auto; display: inline-block; top: 0px;"></a></h1></div></div></nav><div class="container mt-2"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="chevron-right" viewBox="0 0 16 16"><path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></symbol></svg></div><div class="feature col"><h3 class="fs-2 text-success">Icon link example - hover</h3><p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the icon moves to the right on hovering.</p><a class="icon-link icon-link-hover" href="#"><strong>Icon link hover</strong><svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"></use></svg></a></div></body></html></pre>
Utilities
In order to modify the underline color and offset of the icon link, use the custom link utilities provided by Bootstrap.
To add color to the iconlink, use the class link-* (where * can be any color-modes like danger, success, warning, info, etc.)
To add color to the line under the iconlink, use the class link-underline-* where * can be any color-modes like danger, success, warning, info, etc.)
To add opacity to the line under the iconlink, use the class link-underline-opacity-* (where * can be the percentage number such as 50, 55, 75, etc.)
Let us see an example of modifying the icon link using the predefined utilities:https://www.tutorialspoint.com/bootstrap/examples/icon_link_utilities.php
Example
You can edit and try running this code using the Edit & Run option.
style="height: auto; width: auto; display: inline-block; top: 0px;"></a></h1></div></div></nav><div class="container mt-2"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="airplane-fill" viewBox="0 0 16 16"><path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path></symbol></svg><div class="feature col"><h3 class="fs-2 text-success">Icon link customization</h3><p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the appearance of icon link is modified using the link utility classes.</p><a class="icon-link icon-link-hover link-danger link-underline-success link-underline-opacity-55" href="#"><strong>Icon link utility</strong><svg class="bi" aria-hidden="true"><use xlink:href="#airplane-fill"></use></svg></a></div></div></body></html></pre>
This chapter discusses about adding and modifying custom focus ring styles to various elements and components.
In Bootstrap 5, the focus ring is a visual indicator that appears around an element when it receives focus. The focus ring is a circular outline that appears around the element, typically in a contrasting color, to indicate that the element is currently active and ready to receive input from the user.
Bootstrap 5 provides a built-in focus ring that is applied to interactive elements such as buttons, links, and form controls by default.
The default outline on :focus is removed by the helper class .focus-ring, thus replacing it with a box-shadow.
Let’s see an example showing the usage of .focus-ring:https://www.tutorialspoint.com/bootstrap/examples/focus_ring.php
Example
You can edit and try running this code using the Edit & Run option.
Red focus ring
</a><div></body></html></pre>
Let's see an example of customizing the CSS variables --bs-focus-ring-* in order to make the focus ring blurry:https://www.tutorialspoint.com/bootstrap/examples/focus_ring_CSS_blur.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter discusses about the colored link feature of helper classes. The Bootstrap 5 colored links are used to add colors to the link elements.
In order to make the links colored, use .link-* classes. These classes have :hover and :focus states, unlike the .text-* classes.
In order to make the links legible, that have relatively light foreground color, use them on a dark background.
.link-body-emphasis is the only colored link that is unique and high contrast link color. It comes with :hover and :focus styles.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Colored link</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container p-2"><h4>Colored links</h4><br><p><a href="#" class="link-primary">Primary Color Link</a></p><p><a href="#" class="link-secondary">Secondary Color Link</a></p><p><a href="#" class="link-info">Info Color Link</a></p><p><a href="#" class="link-success">Success Color Link</a></p><p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p><p><a href="#" class="link-dark">Dark Color Link</a></p><p><a href="#" class="link-warning">Warning Color Link</a></p><p><a href="#" class="link-danger">Danger Color Link</a></p><p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p></div></body></html>
Accessibility tip: Use of color just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
Link utilities
Bootstrap provides a range of link utilities such as link opacity, link offset, underline color, underline opacity, and so on.
Similarly colored links can also be modified using the link utilities. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/colored_link_utilities.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter discusses about setting the background color with appropriate contrasting foreground or text color.
These color and background helper classes combine the .text-* utilities and .bg-* utilities in one common class, namely .text-bg-*.
In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities</h4><br><div class="text-bg-primary p-3">Primary background with contrasting text color</div><div class="text-bg-secondary p-3">Secondary background with contrasting text color</div><div class="text-bg-success p-3">Success background with contrasting text color</div><div class="text-bg-danger p-3">Danger background with contrasting text color</div><div class="text-bg-warning p-3">Warning background with contrasting text color</div><div class="text-bg-info p-3">Info background with contrasting text color</div><div class="text-bg-light p-3">Light background with contrasting text color</div><div class="text-bg-dark p-3">Dark background with contrasting text color</div></body></html>
Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
With components
The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on badges.
In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background_badges.php
Example
You can edit and try running this code using the Edit & Run option.
The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on cards.
In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background_cards.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities - cards</h4><br><div class="card text-bg-info mb-3" style="max-width: 18rem;"><div class="card-header fw-bold">Card Header</div><div class="card-body"><p class="card-text">Card showing the text and background color classes used together.</p></div></div><div class="card text-bg-warning mb-3" style="max-width: 18rem;"><div class="card-header fw-bold">Card Header</div><div class="card-body"><p class="card-text">Card showing the text and background color classes used together.</p>s
This chapter discusses the clearfix feature of helper classes. The clearfix feature in Bootstrap is used to clear floated elements within a container. When elements within a container are floated, the container’s height can sometimes be collapsed, causing issues with the layout.
Here’s an example of how to use the .clearfix class in Bootstrap:https://www.tutorialspoint.com/bootstrap/examples/clearfix_create.php
Example
The example below shows the usage of clearfix. Without the clearfix, the wrapping div would not span around the buttons which would cause a broken layout.
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about Bootstrap validation. Bootstrap 5 Validation enhances HTML5 form validation by offering useful feedback to users, supporting default browser behavior, custom styles, and JavaScript.
The client-side custom validation styles and tooltips are inaccessible because they are not visible to assistive technology. It is recommended to use either the server-side option or the default browser validation technique, while we work on the solution.
How form validation works in Bootstrap
The two pseudo-classes :invalid and :valid in CSS are used to provide HTML form validation. It applies to the <textarea>, <select>, and <input> elements.
Bootstrap applies the :invalid and :valid styles to the parent .was-validated class. Fields without a value show as invalid when the page loads. You choose when to activate them (usually after a form submission).
To restore the original appearance of the form after dynamic submissions using Ajax, the class .was-validated should be removed from the <form> to reset its appearance.
The pseudo-classes can be replaced with the .is-invalid and .is-valid classes for server-side validation as a fallback, without the need for a .was-validated parent class.
Currently, CSS limitations prevent us from directly applying styles to a <label> element that precedes a form control in the DOM without the help of custom JavaScript.
The constraint validation API, which consists of various JavaScript methods for validating form controls, is supported by all contemporary web browsers.
Use browser default styles or create custom feedback styles using HTML/CSS.
Use setCustomValidity method in JavaScript for unique validity messages.
Let’s look at some examples of custom form validation styles, optional server-side classes and browser defaults.
Custom styles
Add novalidate boolean attribute to the <form> to receive custom validation messages from Bootstrap.
Browser default feedback tooltips are disabled with above boolean attribute but JavaScript validation APIs still work. Submitting this form will trigger JavaScript to provide feedback, displaying :invalid and :valid styles on form controls.
Custom feedback styles improve feedback communication by adding colors, borders, focus styles, and backdrop icons. Backdrop icons for <select> are only available for .form-select, and not .form-control.
This example demonstrates a Bootstrap form with validation features, to ensure that the required fields are filled out correctly before the form can be submitted.https://www.tutorialspoint.com/bootstrap/examples/custom_style.php
Example
You can edit and try running this code using Edit & Run option.
Correct input!
</div></div><div class="col-md-4"><label for="validationCustomEmail" class="form-label">Email Id</label><div class="input-group has-validation"><input type="text" class="form-control" id="validationCustomEmail" aria-describedby="inputGroupPrepend" required><span class="input-group-text" id="inputGroupPrepend">@tutorialspoint.com</span><div class="invalid-feedback">
Please enter correct mail id.
</div></div></div><div class="col-md-4"><label for="validationCustomPhone" class="form-label">Mobile no</label><input type="text" class="form-control" id="validationCustomPhone" required><div class="invalid-feedback">
please enter correct mobile no.
</div></div><div class="col-md-6"><label for="validationAddress" class="form-label">Address</label><input type="text" class="form-control" id="validationAddress" value="XYZ - 123" required><div class="valid-feedback">
Correct input!
</div></div></div><div class="col-md-3"><label for="validationCustom" class="form-label">Gender</label><select class="form-select" id="validationCustom" required><option selected disabled value="">Choose...</option><option>Male</option><option>Female</option><option>Others</option></select><div class="invalid-feedback">
Please select gender.
</div></div><div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="invalidCheck" required><label class="form-check-label" for="invalidCheck">
I have reviewed and agree to Terms of Services and Privacy Policy.
</label><div class="invalid-feedback">
You must agree before submitting.
</div></div></div><div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div></form><script>
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script></body></html>
The following JavaScript code snippet disables form submissions if there are invalid fields. It achieves this by adding event listeners to the forms and preventing the default form submission behavior if the form is not valid.
// Example JavaScript starter for disabling form submissions if there are invalid fields
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
We can also use browser default messages instead of custom validation message. Depending on your browser and OS, feedback style varies slightly.
Although CSS cannot be used to style these feedback styles, JavaScript can still be used to alter the feedback text.
Try submitting the form in the following example to how default browser validation messages show up.https://www.tutorialspoint.com/bootstrap/examples/validation_browser_default.php
Example
You can edit and try running this code using Edit & Run option.
I have reviewed and agree to Terms of Services and Privacy Policy.
</label></div></div><div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div></form></body></html></pre>
Server-side
Client-side validation is recommended, but in case of server-side validation, use .is-invalid and .is-valid directives to indicate form field status. Also consider using .invalid-feedback with these classes.
Use aria-describedby attribute to link invalid feedback/error message to the form field in the case of invalid fields. (Allows more than one id to be referenced if field connects to other form text.)
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
This chapter will discuss about Bootstrap form layout. Add structure to your forms with form layout options, from inline to horizontal to implementing custom grids.
Form layout
Bootstrap gives no default styling for the <form> element, but there are a few capable browser highlights that are given by default. Each group of form fields must be inside a <form> element.
Ensure to be specify and include a type attribute for <button>s within a <form> as they default to type=”submit”.
Forms are stacked vertically by default. Bootstrap uses display: block and width: 100% to nearly all form controls. To change layout of each form, use additional classes.
Utilities
To add some structure to forms should be use margin utilities. Use basic grouping of labels, controls, optional form text, and form validation messages.
For consistency, sticking to margin-bottom utilities and employing a single direction all through the form is recommended.
Use grid classes for building the more complex forms. Form a grid for form layouts that require multiple columns, varied widths, and additional alignment options. You need to enable Sass variable using $enable-grid-classes.https://www.tutorialspoint.com/bootstrap/examples/layout_form_grid.php
Example
You can edit and try running this code using Edit & Run option.
To control over the gutter width in the inline as block direction use the gutter modifier classes. By using $enable-grid-classes you can enable Sass variable.https://www.tutorialspoint.com/bootstrap/examples/layout_gutters.php
Example
You can edit and try running this code using Edit & Run option.
I agree to terms and conditions
</label></div></div><div class="col-12"><button type="submit" class="btn btn-primary">Submit</button></div></form></body></html></pre>
Horizontal form
Use the class .row to form groups to create horizontal forms with the grid. Use the class .col-*-* to define the width of the labels and controls.
To make a form vertically centered with their associated form controls, use the class .col-form-label to <label>.
Use the classes .col-form-label-sm or .col-form-label-lg to your <label> or <legend> to follow the size of .form-control-sm and .form-control-lg respectively.https://www.tutorialspoint.com/bootstrap/examples/layout_horizontal_form_label_sizing.php
Example
You can edit and try running this code using Edit & Run option.
As mentioned in the previous example, the grid system allows any number of .cols within a .row. Divide the available width evenly between them. You can also use a specific column class like .col-sm-7 to select a subset of columns to occupy more or less space while the remaining .col divides the rest evenly.https://www.tutorialspoint.com/bootstrap/examples/layout_column_sizing.php
Example
You can edit and try running this code using Edit & Run option.
In the below example, use flexbox utility to center the content vertically and change .col to .col-auto. So that the column only takes up as much space as it needs. In other words, the column size depends on the content.https://www.tutorialspoint.com/bootstrap/examples/layout_auto_sizing.php
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about Bootstrap floating labels. Floating labels refer to form labels that float over the input fields.
Basic example
To allow floating labels with Bootstrap’s textual form fields, include a pair of <input class=”form-control”> and <label> elements in .form-floating.
Each <input> must have a placeholder since the technique for CSS-only floating labels employs the :placeholder-shown pseudo-element. The <input> needs to be placed first to make use of a sibling selector like (~).
When a value is already assigned, <label> elements will automatically align their position to float over the input field.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_floated_location.php
Example
You can edit and try running this code using Edit & Run option.
By using form validation styles like is-invalid, you can provide visual feedback to users when they submit incorrect data.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_floated_location.php
Example
You can edit and try running this code using Edit & Run option.
The height of <textarea> with the class .form-control is automatically set to have the same height as <input>.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_textareas.php
Example
You can edit and try running this code using Edit & Run option.
Don’t use the rows attribute if you want to customize the height of your <textarea>. Instead, specify a height explicitly (either inline or using customized CSS). In the below example we have used inline styling.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_customize_textareas.php
Example
You can edit and try running this code using Edit & Run option.
Floating labels are only accessible on .form-selects, in addition to .form-control.
The same concepts apply to them, except unlike <input>s, they always display the <label> in its floated state. Size-based and multiple selects are not supported.
Add the disabled boolean attribute on an input. This gives grayed-out appearance to an input, textarea, or select. It also removes pointer events, and prevents focusing.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_disabled.php
Example
You can edit and try running this code using Edit & Run option.
When switching from an editable <input> to a plaintext value without changing the page layout, .form-control-plaintext can be useful.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_readonly_plaintext.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating mb-3 mt-2"><input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment"><label for="floatingEmptyPlaintextInput">Block the comment</label></div><div class="form-floating mb-3"><input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment"><label for="floatingPlaintextInput">Add a comment</label></div></body></html>
Input groups
Similarly, floating labels support .input-group.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_input_groups.php
Example
You can edit and try running this code using Edit & Run option.
The -feedback (it is a validation class to provide valuable feedback to users before submitting the form.) should be positioned outside of the .form-floating but inside of the .input-group when using .input-group and .form-floating along with form validation.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_has_validation.php
Example
You can edit and try running this code using Edit & Run option.
When using a grid system, the implementation of floating labels layout becomes beneficial as it enables the placement of form elements within column classes.
There is no pre-defined classes in bootstrap, so we must utilize form classes and position them according to our requirement.