Bootstrap is the most used CSS framework by web developers. It comes with a bunch of utilities that makes our work easier and improve the productivity if it is used wisely.
This is a list of CSS rules/properties you don't need to write in your stylesheet file if you're using Bootstrap framework.
Position
You don't need to write position: relative; or position: absolute; in your CSS file! Bootstrap is giving us a list of utility classes allowing to control the positioning type from the HTML template.
<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-sticky"></div>
<div class="position-static"></div>
<div class="position-fixed"></div>
Overflow
<div class="overflow-hidden"></div>
<div class="overflow-auto"></div>
Text Decoration
Anchor texts are by default underlined in Bootstrap. If you want to undo this behavior you can juste use text-decoration-none class.
<a href="#" class="text-decoration-none">This is a link</a>
Visibility
<!-- visibility: visible; -->
<div class="visibile"></div>
<!-- visibility: hidden; -->
<div class="invisible"></div>
Font Weight
<!-- font-weight: 300; -->
<div class="font-weight-light"></div>
<!-- font-weight: 400; -->
<div class="font-weight-normal"></div>
<!-- font-weight: 700; -->
<div class="font-weight-bold"></div>
<!-- font-weight: bolder; -->
<div class="font-weight-bolder"></div>
Text Transform
<!-- text-transform: uppercase; -->
<div class="text-uppercase"></div>
<!-- text-transform: lowercase; -->
<div class="text-lowercase"></div>
<!-- text-transform: capitalize; -->
<div class="text-capitalize"></div>
Display
This is an essential CSS property that you will use massively as a frontend developer. That's why Bootstrap feeds us with a large list of classes to deal with display property responsively.
<!-- display: block; -->
<!-- All screens -->
<div class="d-block"></div>
<!-- Small devices -->
<div class="d-sm-block"></div>
<!-- Medium devices -->
<div class="d-md-block"></div>
<!-- Large devices (Tablets) -->
<div class="d-lg-block"></div>
<!-- Extra large devices (Desktop) -->
<div class="d-xl-block"></div>
<!-- display: flex; -->
<!-- All screens -->
<div class="d-flex"></div>
<!-- Small devices -->
<div class="d-sm-flex"></div>
<!-- Medium devices -->
<div class="d-md-flex"></div>
<!-- Large devices (Tablets) -->
<div class="d-lg-flex"></div>
<!-- Extra large devices (Desktop) -->
<div class="d-xl-flex"></div>
<!-- display: none; -->
...
<!-- display: inline; -->
...
<!-- display: inline-block; -->
...
Flexbox properties
Bootstrap is based on CSS Flexbox. This layout comes with a lot of properties that allow us to have a control over.
With Bootstrap we can make use of all those properties directly from HTML and, like we saw with display property, responsiveness is guaranteed out-of-the-box.
<!-- justify-content; -->
<!-- All screens -->
<div class="justify-content-center"></div>
<!-- Small devices -->
<div class="justify-content-sm-center"></div>
<!-- Medium devices -->
<div class="justify-content-md-center"></div>
<!-- Large devices (Tablets) -->
<div class="justify-content-lg-center"></div>
<!-- Extra large devices (Desktop) -->
<div class="justify-content-xl-center"></div>
<div class="justify-content-start"></div>
<div class="justify-content-end"></div>
<div class="justify-content-between"></div>
<div class="justify-content-around"></div>
<!-- align-items; -->
<div class="align-items-start"></div>
<div class="align-items-end"></div>
<div class="align-items-center"></div>
<div class="align-items-baseline"></div>
<div class="align-items-stretch"></div>
<!-- align-content; -->
<div class="align-content-start"></div>
<div class="align-content-end"></div>
<div class="align-content-between"></div>
<div class="align-content-around"></div>
<div class="align-content-center"></div>
<div class="align-content-stretch"></div>
Width & Height
<!-- width: 25%; -->
<div class="w-25"></div>
<!-- width: 50%; -->
<div class="w-50"></div>
<!-- width: 75%; -->
<div class="w-75"></div>
<!-- width: 100%; -->
<div class="w-100"></div>
<!-- width: auto; -->
<div class="w-auto"></div>
<!-- max-width: 100%; -->
<div class="mw-100"></div>
<!-- height: 25%; -->
<div class="h-25"></div>
<!-- height: 50%; -->
<div class="h-50"></div>
<!-- height: 75%; -->
<div class="h-75"></div>
<!-- height: 100%; -->
<div class="h-100"></div>
<!-- height: auto; -->
<div class="h-auto"></div>
<!-- max-width: 100%; -->
<div class="mh-100"></div>
Padding & Margin
Every layout or design depends on padding and margin properties.
Here is a list of utilities that may help you:
<!-- Padding Top -->
<!-- padding-top: 0; -->
<div class="pt-0"></div>
<div class="pt-xs-0"></div>
<div class="pt-sm-0"></div>
<div class="pt-md-0"></div>
<div class="pt-lg-0"></div>
<div class="pt-xl-0"></div>
<!-- padding-top: 0.25rem; -->
<div class="pt-1"></div>
...
<!-- padding-top: 0.5rem; -->
<div class="pt-2"></div>
...
<!-- padding-top: 1rem; -->
<div class="pt-3"></div>
...
<!-- padding-top: 1.5rem; -->
<div class="pt-4"></div>
...
<!-- padding-top: 3rem; -->
<div class="pt-5"></div>
...
<!-- Padding Left -->
<div class="pl-0"></div>
...
<!-- Padding Right -->
<div class="pr-0"></div>
...
<!-- Padding Bottom -->
<div class="pb-0"></div>
...
<!-- Horizontal Padding -->
<div class="px-0"></div>
...
<!-- Vertical Padding -->
<div class="py-0"></div>
...
You can use the same naming convention for margin classes. Just replace p width m.
Screen Reader Only
Sometimes, we need to add some text to html markup and we want it to be available only for screen readers for accessibility purposes.
Bootstrap provide a class utility to do that: sr-only.
<div class="sr-only"><a href="#content">Skip to Main Content</a></div>
Float
Personaly, I dont use float property anymore! But if you do, here is some gems for free:
<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-none"></div>
Top comments (10)
Exactly why relying on bootstrap is a pain in the ass, at least for me. I get that it's easy for most people to just use classes but I find it annoying that bootstrap uses classes for a single css property :p
Great article though! I think a lot of people were overriding these instead
You get a lot of flexibility with using single purpose classes, although I don't really love projects where everything is made using only those single purpose classes. I still like to style "components" as their own classes and use some utility single purpose classes if needed.
It's easier to just add/remove a single property. Composition is a great tool. When I started I also mostly styled everything using custom classes for every element and doing all sorts of things and repeating CSS rules inside many of these selectors. After some time I realized that it might be useful to extract some of these properties into single use classes. I don't extract a bunch of stuff, just smaller things like
text-alignor maybepadding/marginfor consistent spacing on the page. Or maybe even main brand highlight color.This allows me to prototype pages faster in most cases and I can adapt to designer wishes faster. I'm sure we have all been in a situation where the designer just wants to update some element in text to be highlighted in brand highlight color, so instead of having to give it a separate class that has semantic meaning for that element in that context or use more complex CSS selector (because we cannot use more broad selector like
p span {}), I can just quickly add my highlight class and update it that way. It's also easier for the browser to just apply one class (one property) to 100 elements, rather than 50 different CSS selectors and cascade for those 100 elements, although I'm not sure about the performance impact there or if there's any significant performance impact.But that's just the way I love writing CSS now, might not be a good fit for everyone.
After a long hours of learning BS, this is the article that I need to understand. At least, this will be a clean guide who are using. ✌🏼Thank you so much.
Thanks for sharing, I think you should mention wich version of bootstrap here, because thats cames up from bootstrap 4
Thanks for this, it's the last time I override the padding in my CSS.
But of course it would be better if your css classes represented semantic meaning rather than just floating-left for no reason. (Like floating-menu or something like that)
For me personally it really depends. I like to style using custom classes for elements in the app, but I also find value in these single purpose classes.
When people have these debates they usually go either 100% to one side or the other. I don't really see people mention a combination of both approaches.
float-left as a name has a lot of sense here because it only has that purpose. If you called it floating-menu and it only has that one purpose, how would you use that class with something that isn't a menu, maybe a card? You would create a floating-card class that has this same property? Thus repeating yourself.
but aren't they different things?
you have a floating menu its essentially a "menu".. so everything that is a menu has its properties.
If you put the actual non-semantic properties on it then its unclear which "float-lefts" you would need to change and which remain. Ie. it lacks abstraction and meaning. You've simply put the implementation without indicating the intention.
They are different things, but it doesn't mean they cannot share some of the same behavior. As I've said, I don't support putting everything in utility classes, but I see the use case for some of them.
I see your point, but these utility classes usually have quite understandable names.
float-leftis kinda self explanatory. To be honest, I kinda like both of both worlds. I style mostly with semantic class names, creating "components" using BEM, but I also sprinkle some utility classes here and there, it's just a matter of preference.EDIT: I might have gone a bit off topic here. If I return to the context of "If you are using Bootstrap, don't override behavior with custom classes if there are utility classes already available to you" and that's a point I agree with.
Thanks a lot for this! These are definitely underused and not very well documented.