Bootstrap 5 Examples with Code Explanation

Introduction:

Bootstrap 5, the latest version of the popular front-end framework, has revolutionized web development with its powerful features and intuitive design. With a wide range of components and utilities, Bootstrap 5 enables developers to create responsive, visually appealing websites efficiently. In this article, we will explore the top 6 Bootstrap 5 examples that demonstrate the framework’s versatility and showcase its potential. Whether you’re a beginner or an experienced developer, these examples will inspire you to leverage Bootstrap 5’s capabilities in your own projects.

Bootstrap 5 Navbar Examples:

Bootstrap 5 Example: How to create Basic Navbar with a Brand logo:

Code Explanation:

This line creates the main container for the navbar. The navbar class specifies that it’s a navbar, while navbar-expand-lg makes it expand to the full width on large screens. navbar-light sets a light color scheme, and bg-light applies a light background color.

This div sets the maximum width of the navbar content. It acts as a container for the navbar items, providing a consistent layout.

This line defines the brand or logo of the website, which is displayed on the navbar. It is a link (<a>) with the navbar-brand class. The “#” in the href attribute represents a placeholder link and should be replaced with the actual URL of your logo or home page.

This button is the navbar toggler that appears on small screens. It triggers the collapse and expand behavior of the navbar. The data-bs-toggle and data-bs-target attributes control the collapse functionality by targeting the collapsible element with the ID “navbarNav”.

This div is the container for the collapsible navbar items. It is initially collapsed and expands when triggered by the toggler button. The “navbar-collapse” class is responsible for the collapsing behavior, and the “id” attribute should match the “data-bs-target” attribute of the toggler button.

This unordered list contains the navbar items, such as navigation links and dropdown menus.

These lines define each navbar item. Each item is wrapped in an <li> element with the “nav-item” class, and the link itself is an <a> element with the “nav-link” class. You can add or modify these items as needed. The “#” in the href attribute represents a placeholder link, which should be replaced with the actual URLs of your pages.

In summary, this code creates a responsive navbar with a light background color. It includes a brand/logo on the left side and a collapsible menu with navigation links on the right side. The navbar toggler button appears on small screens to expand and collapse the menu.

Bootstrap 5 Example: How to create navbar with Dropdown Menu:

Code Explanation:

This line creates the main container for the navbar. The navbar class specifies that it’s a navbar, while navbar-expand-lg makes it expand to the full width on large screens. navbar-light sets a light color scheme, and bg-light applies a light background color.

This div sets the maximum width of the navbar content. It acts as a container for the navbar items, providing a consistent layout.

This line defines the brand or logo of the website, which is displayed on the navbar. It is a link (<a>) with the navbar-brand class. The “#” in the href attribute represents a placeholder link and should be replaced with the actual URL of your logo or home page.

This button is the navbar toggler that appears on small screens. It triggers the collapse and expand behavior of the navbar. The data-bs-toggle and data-bs-target attributes control the collapse functionality by targeting the collapsible element with the ID “navbarNav”.

This div is the container for the collapsible navbar items. It is initially collapsed and expands when triggered by the toggler button. The “navbar-collapse” class is responsible for the collapsing behavior, and the “id” attribute should match the “data-bs-target” attribute of the toggler button.

This unordered list contains the navbar items, such as navigation links and dropdown menus.

These lines define each navbar item. Each item is wrapped in an <li> element with the “nav-item” class, and the link itself is an <a> element with the “nav-link” class. You can add or modify these items as needed. The “#” in the href attribute represents a placeholder link, which should be replaced with the actual URLs of your pages.

This code represents a dropdown menu item. It has the “nav-item dropdown” classes for styling, and the “dropdown-toggle” class indicates that it triggers a dropdown menu. The data-bs-toggle, data-bs-target, and aria-expanded attributes control the dropdown functionality. The “#” in the href attribute represents a placeholder link.

This unordered list represents the dropdown menu itself. It has the “dropdown-menu” class and the aria-labelledby attribute to associate it with the dropdown toggle button.

These lines represent individual items within the dropdown menu. Each item is a list item (<li>) containing an anchor link (<a>) with the “dropdown-item” class. You can add or modify these items as needed. The “#” in the href attribute represents a placeholder link.

This line represents a regular navbar item for the “Contact” link. It has the “nav-item” class for styling, and the link itself has the “nav-link” class. The “#” in the href attribute represents a placeholder link.

In summary, this code creates a Bootstrap 5 navbar with a light background color. It includes a brand/logo on the left side and a collapsible menu with navigation links on the right side. The navbar toggler button appears on small screens to expand and collapse the menu. The code also demonstrates the usage of a dropdown menu for the “Services” item, which expands to show additional options when clicked.

You can modify the content, styling, and functionality of this code to suit your specific needs by replacing the placeholder links, adding or removing navbar items, and customizing the appearance using Bootstrap’s CSS classes.

Bootstrap 5 Example: How to create Navbar with Search From

Code Explanation:

This line creates the main container for the navbar. The navbar class specifies that it’s a navbar, while navbar-expand-lg makes it expand to the full width on large screens. navbar-light sets a light color scheme, and bg-light applies a light background color.

This div sets the maximum width of the navbar content. It acts as a container for the navbar items, providing a consistent layout.

This line defines the brand or logo of the website, which is displayed on the navbar. It is a link (<a>) with the navbar-brand class. The “#” in the href attribute represents a placeholder link and should be replaced with the actual URL of your logo or home page.

This button is the navbar toggler that appears on small screens. It triggers the collapse and expand behavior of the navbar. The data-bs-toggle and data-bs-target attributes control the collapse functionality by targeting the collapsible element with the ID “navbarNav”.

This div is the container for the collapsible navbar items. It is initially collapsed and expands when triggered by the toggler button. The “navbar-collapse” class is responsible for the collapsing behavior, and the “id” attribute should match the “data-bs-target” attribute of the toggler button.

This unordered list contains the navbar items, such as navigation links and dropdown menus. The “me-auto” class is used to align the items to the left side of the navbar.

These lines define each navbar item. Each item is wrapped in an <li> element with the “nav-item” class, and the link itself is an <a> element with the “nav-link” class. You can add or modify these items as needed. The “#” in the href attribute represents a placeholder link, which should be replaced with the actual URLs of your pages.

This code represents a dropdown menu item. It has the “nav-item dropdown” classes for styling, and the “dropdown-toggle” class indicates that it triggers a dropdown menu. The data-bs-toggle, data-bs-target, and aria-expanded attributes control the dropdown functionality. The “#” in the href attribute represents a placeholder link.

This unordered list represents the dropdown menu itself. It has the “dropdown-menu” class and the aria-labelledby attribute to associate it with the dropdown toggle button.

These lines represent individual items within the dropdown menu. Each item is a list item (<li>) containing an anchor link (<a>) tag (class=”dropdown-item”) with the placeholder link (href=”#”). You can modify these items and their links to match your specific dropdown menu options.

This line represents a regular navbar item for the “Contact” link. It has the “nav-item” class for styling, and the link itself has the “nav-link” class. The “#” in the href attribute represents a placeholder link.

This line starts the search form section of the navbar. The “d-flex” class is a utility class that applies flexbox properties to the form, allowing its elements to be flexible and responsive.

This line represents the search input field. It has the “form-control” class for styling, the “me-2” class for adding a margin on the right side, and the placeholder text “Search”. The type=”search” attribute specifies that it’s a search input field, and the aria-label attribute provides an accessible label for screen readers.

This line creates the search button. It has the “btn” class for styling, “btn-outline-success” class for a button with an outline and a success color scheme. The type=”submit” attribute specifies that it’s a submit button for the search form.

In summary, this code creates a Bootstrap 5 navbar with a light background color. It includes a brand/logo on the left side, a collapsible menu with navigation links, a dropdown menu for the “Services” item, and a search form on the right side. You can customize the content, styling, and functionality of this code to fit your specific needs by replacing the placeholder links, adding or removing navbar items, modifying the dropdown menu options, and adjusting the search form properties.

Bootstrap 5 Grid System Examples:

Bootstrap 5 Example: how to Create Image Grid With Caption:

Code explanation:

This code creates a grid layout using the Bootstrap 5 grid system. Let’s break down the code and understand its structure:

The code starts with a “<div>” element with the class “container”. This class is provided by Bootstrap to create a responsive container that centers the content and adds some padding to the sides.

Inside the container, there is a “<div>” element with the class “row”. The “row” class is used to create a horizontal row to hold the columns.

Within the row, there are three “<div>” elements with the class “col-lg-4”. The “col-lg-4” class specifies that each column should take up four units out of twelve on large screens (lg).

Inside each column, there is a “<div>” element with the class “image-container”. This element acts as a container for the image and caption.

Within the image container, there is an “<img>” element with the “src” attribute pointing to an image file and the alt attribute providing alternative text for the image.

After the image, there is a “<div>” element with the class “caption”. This element holds the caption text for the image.

The code repeats this structure six times to create a grid layout with two rows and three columns. Each column contains an image with a corresponding caption.

By using the Bootstrap grid system classes, the code creates a responsive layout that adjusts based on the screen size. On larger screens, the columns span four units out of twelve, allowing three columns to fit in a row. On smaller screens, the columns will stack vertically, one on top of the other, to ensure optimal viewing experience.

Overall, this code demonstrates how to use the Bootstrap grid system to create a grid layout with images and captions, allowing for easy responsiveness and alignment of content.

Bootstrap 5 Example: how to create Image Carousel using Bootstrap 5 Grid:

Code Explanation:

This code creates an image carousel using Bootstrap 5’s Carousel component. Let’s break down the code and understand its structure:

The code starts with the opening “<body>” tag, indicating the beginning of the HTML body section.

Inside the body, there is a “<div>” element with the ID “carouselExampleIndicators” and a class “carousel slide”. This <div> acts as the main container for the carousel component.

Within the main container, there is a “<div>” element with the class “carousel-indicators”. Inside this “<div>”, there are three “<button>” elements. These buttons serve as indicators for each slide in the carousel. Each button has the data-bs-target attribute set to the ID of the main container, and the data-bs-slide-to attribute set to a specific index value, indicating which slide it corresponds to.

Next, there is another “<div> element with the class “carousel-inner”. This “<div>” holds the actual slides of the carousel. It contains three “<div>” elements with the class “carousel-item”. The first “<div>” has the additional class “active” to indicate that it is the initially displayed slide. Each slide consists of an “<img>” element with a source file specified by the src attribute, a class “d-block w-100” for proper styling, and width and height attributes to define the dimensions of the image. Additionally, each slide has a “<div>” element with the class “carousel-caption” that contains a heading (<h3>) and a paragraph (<p>) providing a description for the image.

After the carousel slides, there are two “<button>” elements with the classes “carousel-control-prev” and “carousel-control-next”. These buttons enable navigation to the previous and next slides in the carousel. They have the data-bs-target attribute set to the ID of the main container, and the data-bs-slide attribute set to “prev” and “next” respectively.

Within the buttons, there are “<span>” elements with the classes “carousel-control-prev-icon” and “carousel-control-next-icon”. These spans are responsible for displaying the previous and next icons.

The code then includes a “<script>” tag that links the Bootstrap JavaScript bundle file (bootstrap.bundle.js). This file provides the necessary functionality for the carousel component to work.

Overall, this code sets up a responsive image carousel with three slides, indicators, and navigation controls using Bootstrap 5’s Carousel component.

Bootstrap 5 Example: how to create Masonry Grid in bootstrap 5:

Code explanation:

This is an HTML code that creates a web page with a Bootstrap 5 grid system. The code starts by defining the document type and HTML tags. The “head” section contains metadata such as character encoding, viewport settings, and page title. It also includes a link to the Bootstrap CSS stylesheet and custom CSS styling rules.

The “body” section contains the main content of the page wrapped inside a Bootstrap container. Inside the container, there is a row with three columns, each with an image, heading, and paragraph text. The grid system uses the “col-md-4” class to specify that each column should occupy four units out of 12 on medium-sized screens.

The custom CSS styling rules define the appearance of the “custom-card”, “custom-image”, “custom-heading”, and “custom-paragraph” classes used in the HTML code. The “custom-card” class sets the background color, padding, and margin of the card. The “custom-image” class sets the width, height, and border radius of the image. The “custom-heading” and “custom-paragraph” classes set the font size, color, and margin of the heading and paragraph text.

Finally, the code includes a link to the Bootstrap JavaScript bundle, which is used for interactive features such as collapsing navigation menus and modals.

Bootstrap 5 Form Examples:

Bootstrap 5 Example: how to create a basic form in Bootstrap 5:

Bootstrap 5 example: How to create Inline Form in Bootstrap 5:

Bootstrap 5 example: how to create Horizontal Form in Bootstrap 5:

These examples demonstrate different form styles using Bootstrap 5 classes. You can modify them according to your specific requirements and extend them with additional form controls and validation as needed.

Bootstrap 5 Card Examples:

Bootstrap 5 example: how to create Card with Header and Footer:

Bootstrap 5 Example: how to create Card with Image Overlay:

These examples demonstrate some of the basic features and layouts you can achieve using Bootstrap 5 cards. Feel free to customize them further by adding additional classes or styles based on your specific requirements.

Bootstrap 5 Modal Examples:

Bootstrap 5 Example: how to create Basic Bootstrap 5 Modal:

Bootstrap 5 Example: how to create Basic Bootstrap 5 Centered Modal:

Code Explanation:

This “<button>” element is used to trigger the modal. It has the class “btn btn-primary” to style it as a primary button, and the data-bs-toggle and data-bs-target attributes are used to specify that it will toggle a modal component with the ID “myModal”. Open Modal This is the text displayed on the button, indicating that clicking it will open the modal.

This <div> element represents the modal component. It has the class “modal” and an ID of “myModal”. The tabindex=”-1″ attribute is used to make the modal focusable.

This “<div>” element is the container for the modal dialog. It has the classes “modal-dialog” and “modal-dialog-centered” to center the modal vertically and horizontally.

This “<div>” element contains the actual content of the modal.

This is a paragraph element representing the content of the modal. In this example, it displays a welcome message related to a programming digest.

The overall functionality of this code is to create a button that, when clicked, triggers the opening of a modal window. The modal displays the specified content, in this case, a welcome message related to a programming digest. The modal component helps to create overlay-style windows that can be used to display additional information or interact with the user without navigating away from the current page.

These are just a few examples of Bootstrap 5 modals. You can further customize them by adding additional classes or modifying the content inside the modal to suit your specific needs. Remember to include the necessary Bootstrap 5 CSS and JavaScript files in your project for the modals to work correctly.

Bootstrap 5 Accordion Examples:

Bootstrap 5 example: how to create Basic Accordion in Bootstrap 5:

Bootstrap 5 example: how to create Accordion with Different Styling:

Code Explanation:

This div element has the class “accordion” and an ID of “accordionExample”. It acts as a container for the accordion component.

This div element represents an individual item within the accordion.

This h2 element serves as the header for the accordion item. It has the class “accordion-header” and an ID of “headingOne”.

This button element is used as the clickable trigger for expanding and collapsing the content of the accordion item. It has the class “accordion-button” and additional classes “bg-primary” and “text-white” to set the background color and text color. The “data-bs-toggle” and “data-bs-target” attributes are used to define the collapse behavior, and the “aria-expanded” and “aria-controls” attributes provide accessibility information.

This is the text content of the button, displayed as the label for the accordion item.

This div element contains the collapsible content for the accordion item. It has an ID of “collapseOne” and the classes “accordion-collapse”, “collapse”, and “show”. The “aria-labelledby” attribute references the ID of the associated accordion header, and the “data-bs-parent” attribute points to the ID of the accordion container.

This div element holds the actual content that will be displayed when the accordion item is expanded.

This is the text content of the accordion item’s body, representing the content to be shown when the item is expanded.

The second accordion item follows a similar structure, with different IDs, classes, and content.

Overall, the code sets up a Bootstrap 5 accordion component with two collapsible items. Clicking on the buttons toggles the visibility of the corresponding content.