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 element