You Use Bootstrap ? Don't EVER Write Those CSS Properties
Tags: css, bootstrap
Published: 2020-02-11 13:28:02

---
title: You Use Bootstrap ? Don't EVER Write Those CSS Properties
published: true
description: This is a list of CSS rules you don't need to write in your stylesheet file if you're using Bootstrap framework.
tags: CSS, Bootstrap
---

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.

```html
<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

```html
<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.

```html
<a href="#" class="text-decoration-none">This is a link</a>
```

## Visibility

```html
<!-- visibility: visible; -->
<div class="visibile"></div>

<!-- visibility: hidden; -->
<div class="invisible"></div>
```

## Font Weight

```html
<!-- 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

```html
<!-- 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**.

```html
<!-- 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.

```html

<!-- 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

```html
<!-- 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:

```html
<!-- 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`.

```html
<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:

```html
<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-none"></div>
```