To use Bootstrap icons in your code you’ll require an <i> tag with an individual icon class .bi-* applied on it. The general syntax for using Bootstrap icons is: <i class=”bi-class-name“></i> Where class-name is the name of the particular icon class, e.g. search, person, calendar, star, globe, facebook, twitter, and so on. See the list of all Bootstrap icons classes. For example, to place search icon inside a button…

In this tutorial you will learn how to include and use Bootstrap icons on a web page. Using Icons in Bootstrap 5 Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project. The advantage of using…

You can also change the horizontal alignment of content and media by simply tweaking the HTML code itself, as demonstrated in the following example: Example — The output of the above example will look something like this: Besides that you can also align the images or other media at the middle or bottom of the…

Bootstrap Media Objects In this tutorial you will learn how to create the media objects in Bootstrap. Using the Media Object in Bootstrap Bootstrap media object has been discontinued from version 5. However, you can still create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as…

Cards have no specific width, they are 100% wide by default. However, you can change this as needed with custom CSS, grid classes, or sizing utility classes. Let’s try out the following example to understand how it basically works: Example Card with Stretched Link You can add the class .stretched-link to a link inside the card to…

There are several options available for customizing the card’s backgrounds, borders, and color. Customizing Background and Color You can simply use the background and color utility classes to change the appearance of a card. Let’s try out the following example to understand how it basically works: Example — The output of the above example will look something like this:…

In this tutorial you will learn how to use Bootstrap card component. Using the Bootstrap Cards Bootstrap 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. Card replaces panel, well, and thumbnail components in old Bootstrap 3…

In this tutorial you will learn how to style images, as well as how to create responsive images and videos using Bootstrap. Styling Images with Bootstrap Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience. Using the…

In this tutorial you will learn how to use Bootstrap button group component. Creating Button Groups with Bootstrap In the previous chapter you’ve learnt how to create different types of individual buttons and modify them with predefined classes. Bootstrap however, also allows you to group a series of buttons together in a single line through…

With Bootstrap you can easily include spinner icon in a button to indicate the loading state in your application. Check out the following example to see how it works: Example In the next chapter you will learn how to combine multiple buttons horizontally or vertically in a line like toolbars using the Bootstrap button groups component. Also,…