What are utility classes in bootstrap?
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. Show
Changing displayUse our display utilities for responsively toggling common values of the Flexbox optionsBootstrap 4 is built with flexbox, but not every element’s Should you need to add Margin and paddingUse the Toggle visibilityWhen toggling Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the official Sass docs to get started. The
API explainedAll utility variables are added to the
Which outputs the following:
Custom class prefixUse the
Output:
StatesUse
the Need multiple pseudo-classes? Use a space-separated list of states:
Output:
Responsive utilitiesAdd the
Output:
Changing utilitiesOverride existing utilities by using the same key. For example, if you want additional responsive overflow utility classes, you can do this:
Print utilitiesEnabling the
Output:
ImportanceAll utilities generated by the API include Using the APINow that you’re familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities. Add utilitiesNew utilities can be added to the default
Modify utilitiesModify existing utilities in the default
Enable responsiveYou can enable responsive classes for an
existing set of utilities that are not currently responsive by default. For example, to make the
This will now generate responsive variations of
Rename utilitiesMissing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting
Remove utilitiesRemove any of the default utilities by setting the group key to
Remove utility in RTLSome edge cases make
RTL styling difficult, such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the
Output:
This doesn’t output anything in RTL, thanks to the RTLCSS How do I use Bootstrap utilities?Bootstrap 5 Utilities. Borders. Use the border classes to add or remove borders from an element: ... . Border Width. Use .border-1 to .border-5 to change the width of the border: ... . Border Color. ... . Border Radius. ... . Float and Clearfix. ... . Responsive Floats. ... . Center Align. ... . Width.. What are responsive utility classes in bootstrap?The responsive utility classes help to build responsive web designs easily. You can hide or display the content of your choice on the web page. You have to define the size of the screen for which you are hiding or displaying the content.
What is a utility class in CSS?Utilities are simple HTML classes typically scoped to a single CSS property, like border-style or background-color . Utilities can be used additively to style an object from scratch or to override a style defined in component CSS.
What are the different classes of bootstrap?Complete List of All Bootstrap Classes. |