Bootstrap Utilities

Go Back

Level : Beginner

Go Back

Mentor: Shailendra Chauhan

Duration : 00:03:00

Get Details

Background:

You can set background colors or images using Bootstrap classes like 'bg-primary' or 'bg-image'.

Example:

<div class="bg-primary text-white">This is a primary background</div>

Borders:

Apply borders using classes like 'border', 'border-top', etc.

Example:

<div class="border border-danger">Bordered element</div>

Colors:

Use color classes such as 'text-success', 'bg-info', etc., for text and background colors.

Example:

<p class="text-success">Success text color</p>

Display:

Control element visibility with display classes like 'd-none', 'd-block', etc.

Example:

<div class="d-none d-md-block">Visible on medium screens</div>

Flex:

Create flexible layouts using flex classes like 'd-flex', 'justify-content-between', etc.

Example:

<div class="d-flex justify-content-between">Flexible layout</div>

Float:

Float elements using classes like 'float-left' or 'float-right'.

Example:

<img src="image.jpg" class="float-left" alt="Floating image">

Shadows:

Apply shadow effects using classes like 'shadow' or 'shadow-lg'.

Example:

<div class="shadow-lg">Shadowed element</div>

Sizing:

Adjust element size with sizing classes like 'w-50', 'h-100', etc.

Example:

<div class="w-50 h-100">Half-width, full-height</div>

Spacing:

Manage spacing with classes like 'mt-3', 'p-4', etc.

Example:

<div class="mt-3 p-4">Margin and padding</div>

Text:

Style text with classes like 'text-uppercase', 'text-center', etc.

Example:

<p class="text-uppercase text-center">Centered uppercase text</p>

Vertical Align:

Vertically align content using classes like 'align-items-center'.

Example:

<div class="d-flex align-items-center">Vertically centered</div>

Overflow:

Manage overflow behavior with classes like 'overflow-hidden'.

Example:

<div class="overflow-hidden">Overflow hidden</div>

Position:

Control element positioning using classes like 'position-absolute'.

Example:

<div class="position-absolute">Absolutely positioned</div>

Visibility:

Toggle element visibility with classes like 'invisible', 'visible', etc.

Example:

<div class="invisible">Invisible element</div>

Utilities:

Utilize utility classes like 'text-truncate', 'border-top', etc., for quick styling.

Example:

<p class="text-truncate">Truncated text</p>

Interactions:

Enhance interactions with classes like 'btn', 'btn-primary', etc.

Example:

<button class="btn btn-primary">Primary Button</button>

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.