English
Spanish
French
German
Chinese
Arabic
Utilities
Borders
Border Placement
Apply borders in Bootstrap using classes like .border for a
full border, .border-top for a top border, .border-bottom for a
bottom border, and similar classes for left and right. These classes help enhance the layout
and separation of elements.
.border.border-top.border-start.border-bottom.border-endBorder Width
Control border thickness in Bootstrap using classes like
.border for a default border and .border-2 for a thicker border.
You can also use .border-0 to remove borders entirely. These classes help you
adjust the visual weight of elements easily.
.border-0.border.border-2.border-3.border-4.border-5Border Style
Customize border styles in Bootstrap using classes like
.border for a solid border, .border-dashed for a dashed border,
and .border-dotted for a dotted border. These styles help add visual interest
to your components.
.border-solid.border-dashed.border-dotted.border-outsetBorder Color
Change border colors in Bootstrap using classes like
.border-primary, .border-secondary, and
.border-danger. You can also use custom color classes to match your design.
These classes allow you to easily style the borders of your components.
.border-primary.border-secondary.border-success.border-info.border-warning.border-danger.border-dark.border-lightBorder Opacity
Adjust border opacity in Bootstrap using classes like
.border-opacity-10 to .border-opacity-100. These classes let you
control the transparency of borders, enhancing the visual style of your components while
maintaining readability.
.border-opacity-10.border-opacity-20.border-opacity-30.border-opacity-40.border-opacity-50.border-opacity-60.border-opacity-70.border-opacity-80.border-opacity-90.border-opacity-100Border Radius
Control border radius in Bootstrap using the .rounded class for
default rounding, .rounded-top, .rounded-bottom classes for specific
directions, .rounded-circle for circular elements, and .rounded-0-5
for a specific radius value. These classes enhance the visual appeal of your components.
Border Radius Placement
.rounded.rounded-top.rounded-end.rounded-bottom.rounded-start.rounded-circle.rounded-pillBorder Radius Size
.rounded-0.rounded-1.rounded-2.rounded-3.rounded-4.rounded-5Breakpoints
Bootstrap's breakpoints allow you to create responsive layouts by applying
classes like .col-sm-*, .col-md-*, and .col-lg-*. These
classes adjust column sizes at different screen widths, ensuring your design looks great on all
devices.
| Breakpoint | class infix | Dimensions |
|---|---|---|
| Extra small | None | 576px |
| Small | sm |
≥576px |
| Medium | md |
≥768px |
| Large | lg |
≥992px |
| Extra large | xl |
≥1200px |
| Extra extra large | xxl |
≥1400px |
Containers
Use Bootstrap's container classes to create responsive fixed-width or fluid
containers. Classes like .container provide a fixed width, while
.container-fluid stretches to the full width of the viewport, adapting to screen
size.
| Content | Extra small <576px
|
Small ≥576px
|
Medium ≥768px
|
Large ≥992px
|
X-Large ≥1200px
|
XX-Large ≥1400px
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Theme colors
Utilize Bootstrap's theme colors by applying classes like
.text-primary and .bg-secondary to elements. These classes enable you
to easily incorporate the predefined color palette, ensuring a consistent design throughout your
project.
Text colors
Text Theme Color
Change text colors in Bootstrap using classes like
.text-primary, .text-secondary, and others. These classes
apply different colors to text based on the Bootstrap theme palette.
.text-white
.text-primary
.text-secondary
.text-light
.text-success
.text-info
.text-warning
.text-danger
.text-dark
.text-muted
Text Gray Color
Use the .text-gray-* classes in Bootstrap to apply
various shades of gray to text. The asterisk (*) represents different shades, allowing
you to adjust the text color for a softer appearance.
.text-gray-100
.text-gray-200
.text-gray-300
.text-gray-400
.text-gray-500
.text-gray-600
.text-gray-700
.text-gray-800
.text-gray-900
Background
Background Theme Color
Apply background theme colors in Bootstrap using classes like
.bg-primary, .bg-secondary, and others. These classes add
color to the background based on the Bootstrap theme palette.
.bg-light
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-dark
.bg-body
Background Light Color
Use the .bg-*-subtle classes in Bootstrap to apply light
background colors. The asterisk (*) represents any color from the Bootstrap color
palette, providing a subtle and gentle tone to your elements.
.bg-light-subtle
.bg-primary-subtle
.bg-secondary-subtle
.bg-success-subtle
.bg-info-subtle
.bg-warning-subtle
.bg-danger-subtle
.bg-dark-subtle
Background Opacity
Adjust background opacity in Bootstrap using the
.bg-opacity-* classes, where * can be a value from 0 to 100. This controls
the transparency of the background color, allowing for layered effects.
Text Selection
Manage text selection in Bootstrap using classes like
.user-select-all to select all text, .user-select-none to disable
selection, and .user-select-auto for default behavior.
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
Pointer Events
Control pointer events in Bootstrap using .pe-none to
disable interactions and .pe-auto to enable them. These classes manage whether
elements can be clicked or hovered.
This link can not be clicked.
This link can be clicked (this is default behavior).
This
link can not be clicked because the pointer-events property is inherited
from its parent. However, this link has a
pe-auto class and can be clicked.
Shadows
Add shadow effects to elements in Bootstrap using classes like
.shadow-sm for small shadows, .shadow for regular shadows, and
.shadow-lg for larger shadows.
.shadow-none.shadow-sm.shadow.shadow-lgStacks - Vertical
Use the .vstack class in Bootstrap to stack elements
vertically, aligning them in a single column with spacing between items.
Stacks - Horizontal
Use the .hstack class in Bootstrap to stack elements
vertically with simple spacing.
The .ms-auto class in Bootstrap applies an automatic left
margin, pushing the element to the right.
Text truncation
Use the .text-truncate class in Bootstrap to truncate text
with an ellipsis. Combine it with the .max-w-200px class to limit the text to a
maximum width of 200px, ensuring it fits within the container.
.text-truncate class in Bootstrap to truncate text with an ellipsis.
Combine it with the .max-w-200px class to limit the text to a maximum width of
200px, ensuring it fits within the container.
Use the
.text-truncate-2 class in Bootstrap to limit text to two lines and add an
ellipsis if the content exceeds this limit. This ensures the text remains concise and fits
within the designated space.
Float
Use the .text-truncate class in Bootstrap to truncate text
with an ellipsis. Combine it with the .max-w-200px class to limit the text to a
maximum width of 200px, ensuring it fits within the container.
Overflow
Adjust the overflow property on the fly with four default
values and classes. These classes are not responsive by default.
.overflow-auto on an element with set width and
height dimensions. By design, this content will vertically scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.overflow-hidden on an element with set width and
height dimensions.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.overflow-visible on an element with set width and
height dimensions.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.overflow-scroll on an element with set width and
height dimensions.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.overflow-x-auto example on an element.overflow-x-hidden example.overflow-x-visible example .overflow-x-scroll example on an elementTheme Customization
it's time to style according to your choice ..!
Layout
Choose your layout