My Blog

You can use the vertical alignment utility classes to quickly change the vertical alignment of inline, inline-block, inline-table, and table cell elements. Class Description Test .align-baseline Align the baseline of the element with the baseline of its parent. Example .align-top Align the top of the element with the top of the entire line. Example .align-middle…

You can use these text alignment classes to align and format your text content. Class Description Test .text-start Align the text to the left. Example .text-center Align the text to the center. Example .text-end Align the text to the right. Example .text-wrap Wrap the overflowing text. Example .text-nowrap Prevent text from wrapping. Example .text-truncate Truncate…

You can use these text alignment classes to align and format your text content. Class Description Test .text-start Align the text to the left. Example .text-center Align the text to the center. Example .text-end Align the text to the right. Example .text-wrap Wrap the overflowing text. Example .text-nowrap Prevent text from wrapping. Example .text-truncate Truncate…

Similar to the contextual color classes, you can use the contextual background color classes to set the background-color of an element to apply extra emphasis on them. Class Description Test .bg-primary Apply blue background-color (#007bff) on an element. Example .bg-secondary Apply grey background-color (#6c757d) on an element. Example .bg-success Apply green background-color (#28a745) on an element. Example…

In this tutorial you will learn about the Bootstrap helper/utility classes. Color Classes You can use the contextual color classes to emphasize the text and convey meaning through color. Here’s the complete list of available contextual color classes. Class Description Test .text-primary Apply blue color (#007bff) on text. Example .text-secondary Apply grey color (#6c757d) on…

In this tutorial you will learn how to create jumbotron in Bootstrap. Showcasing Contents with Jumbotron The Bootstrap jumbotron provides an excellent way to showcase the key content or information on a web page. However, the Bootstrap’s default jumbotron component has been dropped from the version 5. But, you can still create custom jumbotrons using…

You can use the text color utility classes to customize the color of spinners. Example Try this code » — The output of the above example will look something like this:         Creating Growing Spinners You can also create growing spinners that repeatedly grow and fade out, like this: Example — The output of the above example will…

In this tutorial you will learn how to use the Bootstrap spinner component. Creating the Spinners with Bootstrap Bootstrap introduces the new spinner component that you can use to show the loading state in your applications. Spinners are typically loading icons and they’re built only with HTML and CSS. However, you need some custom JavaScript…

Similar to the solid colors, you can also create different colored striped progress bars using the same background color utility classes. Let’s take a look at the following example: Example — The output of the above example will look something like this:

The default height of the progress-bar is 16px, but you can also set its height according to your need by setting the CSS height property on the .progress element, like this: Example — The output of the above example will look something like this: Creating Stripped Progress Bar To create the stripped progress bar just add an extra class .progress-bar-striped to the .progress-bar element,…