##### 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-end`

##### Border 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-5`

##### Border 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-outset`

##### Border 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-light`

##### Border 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-100`

##### Border 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-pill`

##### Border Radius Size

`.rounded-0`
`.rounded-1`
`.rounded-2`
`.rounded-3`
`.rounded-4`
`.rounded-5`

##### Breakpoints

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.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

##### 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.

.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
.bg-opacity-100

##### 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-lg`

##### Stacks - Vertical

Use the `.vstack` class in Bootstrap to stack elements vertically, aligning them in a single column with spacing between items.

First item
Second item
Third item

##### Stacks - Horizontal

Use the `.hstack` class in Bootstrap to stack elements vertically with simple spacing.

First item
Second item
Third item

The `.ms-auto` class in Bootstrap applies an automatic left margin, pushing the element to the right.

First item
Second item
Third item

##### 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.

This text is quite long, and will be truncated once displayed.
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.

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.

Float start
Float end
Float none

##### Overflow

Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.

This is an example of using `.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.
This is an example of using `.overflow-hidden` on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is an example of using `.overflow-visible` on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is an example of using `.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
with set width and height dimensions.
`.overflow-x-hidden` example
on an element with set width and height dimensions.
`.overflow-x-visible` example
on an element with set width and height dimensions.
`.overflow-x-scroll` example on an element
with set width and height dimensions.

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark