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>