FastBootstrap

https://fastbootstrap.com/docs
Admin
FastBootstrap is a utility-first CSS framework that provides design tokens, utility classes and...
Tokens:54,073
Snippets:443
Trust Score:5.4
Update:11 months ago
Show doc for...
Tokens:
Raw
### HTML: Responsive Float Start Utilities

Source: https://fastbootstrap.com/docs/floats

Provides examples of responsive 'float-start' classes that apply to specific viewport sizes (SM, MD, LG, XL). These classes leverage the same breakpoints as the grid system.

```html
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
```

--------------------------------

### Align Items Start Example (HTML)

Source: https://fastbootstrap.com/docs/align-items

Shows how to use the 'align-items-start' utility to align flex items to the beginning of the container's cross axis.

```html
<div class="d-flex align-items-start gap-4">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>
```

--------------------------------

### HTML: Basic justify-content Examples

Source: https://fastbootstrap.com/docs/justify-content

Demonstrates basic usage of justify-content utilities in HTML for flexbox containers. These examples show how to align items to the start, center, end, between, around, and evenly.

```html
<div class="d-flex justify-content-start">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="d-flex justify-content-center">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="d-flex justify-content-end">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="d-flex justify-content-between">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="d-flex justify-content-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="d-flex justify-content-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

--------------------------------

### Bootstrap Responsive Align Content Utility Example

Source: https://fastbootstrap.com/docs/align-content

Shows how to apply align-content utilities responsively using breakpoint-specific classes. This example applies align-content-start by default and switches to align-content-around at medium screen sizes and above.

```html
<div class="d-flex align-content-start align-content-md-around">
  <!-- ... -->
</div>
```

--------------------------------

### Bootstrap Pointer Events: Basic Usage Example

Source: https://fastbootstrap.com/docs/pointer-events

Demonstrates the usage of Bootstrap's `.pe-none` and `.pe-auto` classes to control pointer events on anchor elements. Includes examples of inheritance and overriding.

```html
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
```

--------------------------------

### Details and Summary Element Styling (HTML)

Source: https://fastbootstrap.com/docs/reboot

Shows how to use the details and summary elements for creating collapsible content sections. Examples include a basic details/summary and one that is initially open.

```html
<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>
```

--------------------------------

### Responsive Flex Shrink Utility (HTML)

Source: https://fastbootstrap.com/docs/flex-shrink

Shows how to apply flex shrink utilities responsively using breakpoint prefixes. This example applies .flex-md-shrink-0 only on medium screen sizes and above.

```html
<div class="flex-shrink flex-md-shrink-0">
  <!-- ... -->
</div>
```

--------------------------------

### Responsive Align Items Example (HTML)

Source: https://fastbootstrap.com/docs/align-items

Illustrates applying responsive alignment utilities, like 'align-items-md-center', to change alignment at specific breakpoints. This example stretches items by default and centers them from the medium breakpoint upwards.

```html
<div class="d-flex align-items-stretch align-items-md-center">
  <!-- ... -->
</div>
```

--------------------------------

### Bootstrap Row Columns Examples (HTML)

Source: https://fastbootstrap.com/docs/grid

These examples show how to use responsive `.row-cols-*` classes on a `.row` element to control the number of columns displayed. This is a shortcut for defining column layouts. `.row-cols-auto` allows columns to take their natural width.

```html
<div class="container">
  <div class="row row-cols-2 ...">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-3 ...">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-auto">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-4">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-4">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col-6">03</div>
    <div class="col">04</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
  </div>
</div>
```

--------------------------------

### Apply single-side margins using Bootstrap utilities

Source: https://fastbootstrap.com/docs/margin

Demonstrates applying margin to individual sides using Bootstrap's m{t|e|b|s}-{size} classes. Shows top, end, bottom, and start margin examples. Requires Bootstrap CSS framework and follows predefined spacing scale.

```html
<div class="mt-4 ...">mt-4</div>
<div class="me-3 ...">me-3</div>
<div class="mb-5 ...">mb-5</div>
<div class="ms-2 ...">ms-2</div>
```

--------------------------------

### Responsive CSS Grid Columns (Bootstrap)

Source: https://fastbootstrap.com/docs/css-grid

Illustrates how to create responsive column layouts using Bootstrap's CSS Grid. This example starts with two columns on small viewports (`.g-col-6`) and adjusts to three columns on medium viewports and above (`.g-col-md-4`).

```html
<div class="grid">
  <div class="g-col-6 g-col-md-4">01</div>
  <div class="g-col-6 g-col-md-4">02</div>
  <div class="g-col-6 g-col-md-4">03</div>
  <div class="g-col-6 g-col-md-4">04</div>
  <div class="g-col-6 g-col-md-4">05</div>
  <div class="g-col-6 g-col-md-4">06</div>
</div>

```

--------------------------------

### HTML: Responsive Flex Grow Utility

Source: https://fastbootstrap.com/docs/flex-grow

Shows an example of applying a flex grow utility with a specific breakpoint in HTML. The `flex-md-grow-0` class applies the `flex-grow-0` utility only at medium screen sizes and above.

```html
<div class="flex-grow flex-md-grow-md-0">
  <!-- ... -->
</div>
```

--------------------------------

### HTML Text Decoration Style Examples

Source: https://fastbootstrap.com/docs/text-decoration-style

Demonstrates how to apply different text decoration styles (solid, double, dotted, dashed, wavy) to text elements using FastBootstrap's utility classes. These examples show the application of `decoration-{style}` classes in conjunction with `text-decoration-underline`.

```html
<p class="text-decoration-underline decoration-solid ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-double ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-dotted ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-dashed ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-wavy ...">The quick brown fox...</p>
```

--------------------------------

### Bootstrap Grid Example: Two Rows with Columns

Source: https://fastbootstrap.com/docs/grid

This example demonstrates a basic Bootstrap grid layout with two rows, each containing columns of specified widths. It utilizes predefined classes like `.container`, `.row`, `.col-8`, and `.col-4` to create a responsive structure that centers content and arranges columns based on available space.

```html
<div class="container">
  <div class="row">
    <div class="col-8">01</div>
    <div class="col-4">02</div>
  </div>
  <div class="row">
    <div class="col-4">03</div>
    <div class="col-8">04</div>
  </div>
</div>
```

--------------------------------

### HTML usage of padding utilities

Source: https://fastbootstrap.com/docs/padding

Examples of applying FastBootstrap padding utility classes in HTML. Demonstrates usage for top, right, bottom, left padding individually as well as horizontal and vertical padding.

```HTML
<div class="pt-4">pt-4</div>
<div class="pe-3">pe-3</div>
<div class="pb-5">pb-5</div>
<div class="ps-2">ps-2</div>
```

```HTML
<div class="px-6">px-6</div>
```

```HTML
<div class="py-6">py-6</div>
```

```HTML
<div class="p-5">p-5</div>
```

```HTML
<div class="py-sm-3 py-md-5">py-sm-3 py-md-5</div>
```

--------------------------------

### Bootstrap Align Content Start Utility

Source: https://fastbootstrap.com/docs/align-content

Demonstrates the use of the align-content-start utility to pack rows against the start of the cross axis in a flex or grid container. This utility requires a flex or grid parent with multiple rows.

```html
<div class="grid gap-4 align-content-start" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

--------------------------------

### Bootstrap Stacked Buttons Example

Source: https://fastbootstrap.com/docs/stacks

Shows a practical example of using `.vstack` to stack buttons vertically. This includes applying Bootstrap button classes and utility classes for layout and alignment within a fixed maximum width container.

```html
<div class="vstack gap-3 max-w-xs mx-auto">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-default">Cancel</button>
  <a href="#" class="btn btn-link">Back</a>
</div>
```

--------------------------------

### Bootstrap Grid Example: Auto-Layout Equal-Width Columns

Source: https://fastbootstrap.com/docs/grid

This example showcases Bootstrap's auto-layout feature for creating equal-width columns within a grid. By using the unitless `.col` class, columns automatically adjust their width to occupy equal space within a row, making layouts flexible across all devices and viewports.

```html
<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>
```

--------------------------------

### Bootstrap Badge Example (HTML)

Source: https://fastbootstrap.com/docs/position

Demonstrates the use of Bootstrap classes to create badge elements with different styles and content within a button. This example utilizes position classes to place badges relative to the button. Dependencies: Bootstrap CSS framework.

```HTML
<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-purple">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-primary position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--ds-text-brand)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"></path></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
```

--------------------------------

### Bootstrap Responsive align-self Example

Source: https://fastbootstrap.com/docs/align-self

Shows a responsive example using Bootstrap's breakpoint-specific `align-self` utilities. The `align-self-md-end` class applies the `align-self-end` property only on medium screen sizes and above, demonstrating adaptive layout control.

```html
<div class="align-self-auto align-self-md-end">
  <!-- ... -->
</div>
```

--------------------------------

### CSS Grid Start Classes for Column Alignment (Bootstrap)

Source: https://fastbootstrap.com/docs/css-grid

Explains and demonstrates Bootstrap's CSS Grid 'start' classes, which are used to specify the starting column for a grid item. These classes correspond to the `grid-column-start` CSS property. Note that start classes begin at `1`.

```html
<div class="grid">
  <div class="g-col-3 g-start-2">01</div>
  <div class="g-col-4 g-start-6">02</div>
</div>

```

--------------------------------

### Bootstrap 5 Row Columns Gutters Example

Source: https://fastbootstrap.com/docs/gutters

Illustrates how to apply gutter classes to rows with responsive row columns in Bootstrap 5. This example uses `.row-cols-*` and responsive gutter classes like `.g-lg-*`.

```html
<div class="container text-center bg-striped-purple px-0">
  <div class="row row-cols-2 row-cols-lg-5 g-1 g-lg-3">
    <div class="col">
      Row column
    </div>
    <div class="col">
      Row column
    </div>
    <div class="col">
      Row column
    </div>
    <div class="col">
      Row column
    </div>
    .....
  </div>
</div>
```

--------------------------------

### Bootstrap 5 Vertical Gutters Example

Source: https://fastbootstrap.com/docs/gutters

Demonstrates the use of `.gy-*` classes to control vertical gutter widths in Bootstrap 5 rows. Includes an example of using `.overflow-hidden` to manage potential overflow issues.

```html
<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      Custom column padding
    </div>
    <div class="col-6">
      Custom column padding
    </div>
    <div class="col-6">
      Custom column padding
    </div>
    <div class="col-6">
      Custom column padding
    </div>
  </div>
</div>
```

--------------------------------

### Bootstrap Progress Bar and Buttons Example (HTML)

Source: https://fastbootstrap.com/docs/position

Shows how to incorporate a progress bar and buttons using Bootstrap. Uses position classes to arrange buttons as well as custom styling for button size and shape. Dependencies: Bootstrap CSS framework.

```HTML
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar bg-primary" role="progressbar" aria-label="Progress" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>
```

--------------------------------

### HTML: Responsive justify-content with Breakpoints

Source: https://fastbootstrap.com/docs/justify-content

Illustrates how to apply justify-content utilities responsively using Bootstrap's breakpoint system. This example shows 'justify-content-start' applied by default and 'justify-content-between' from medium screen sizes upwards.

```html
<div class="d-flex justify-content-start justify-content-md-between">
  <!-- ... -->
</div>
```

--------------------------------

### Align Items Baseline Example (HTML)

Source: https://fastbootstrap.com/docs/align-items

Shows the 'align-items-baseline' utility, which aligns flex items so their baselines are aligned along the cross axis.

```html
<div class="d-flex align-items-baseline gap-4">
  <div class="pt-2 pb-4">01</div>
  <div class="pt-6 pb-5">02</div>
  <div class="pt-5 pb-3">03</div>
</div>
```

--------------------------------

### Bootstrap Grid Mix and Match Responsive Layouts

Source: https://fastbootstrap.com/docs/grid

Provides an example of mixing and matching Bootstrap grid classes for different breakpoints to create complex responsive layouts. Columns can stack or resize differently across various device sizes as needed.

```html
<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>
```

--------------------------------

### Bootstrap Horizontal Gutters Example

Source: https://fastbootstrap.com/docs/gutters

Demonstrates how to use `.gx-*` classes to control horizontal gutter widths in Bootstrap. Requires a container and row elements to function correctly.

```HTML
<div class="container">
  <div class="row gx-5">
    <div class="col">
      Custom column padding
    </div>
    <div class="col">
      Custom column padding
    </div>
  </div>
</div>
```

--------------------------------

### FastBootstrap Height Utilities: Fixed Height Examples

Source: https://fastbootstrap.com/docs/height

These examples demonstrate how to use FastBootstrap's `h-{number}` classes to set fixed heights for elements. The available classes range from 25% to 100% of the parent's height.

```html
<div class="h-100 ..."></div>
<div class="h-75 ..."></div>
<div class="h-50 ..."></div>
<div class="h-25 ..."></div>
```

--------------------------------

### HTML Button with Transition Utilities

Source: https://fastbootstrap.com/docs/transition-property

This example demonstrates how to apply transition utilities to an HTML button. It controls hover effects using properties like ease-in-out, delay, duration, and scale, showcasing visual feedback on user interaction. No external libraries are explicitly required beyond the FastBootstrap CSS.

```html
<button class="transition ease-in-out delay-150 -translate-y-px-hover duration-300 scale-110-hover">Save changes</button>
```

--------------------------------

### Create Unordered List HTML

Source: https://fastbootstrap.com/docs/reboot

Demonstrates a standard unordered list with nested sublists. Shows proper HTML structure for multi-level navigation or content hierarchy. The example includes list items with embedded unordered lists.

```HTML
<ul>
  <li>All lists have their top margin removed</li>
  <li>And their bottom margin normalized</li>
  <li>
    Nested lists have no bottom margin
    <ul>
      <li>This way they have a more even appearance</li>
      <li>Particularly when followed by more list items</li>
    </ul>
  </li>
  <li>The left padding has also been reset</li>
</ul>
```

--------------------------------

### Address Element Styling (HTML)

Source: https://fastbootstrap.com/docs/reboot

Provides examples of the address element for contact information. It shows how to format addresses including names, physical addresses, and email addresses using standard HTML tags like strong, br, and abbr.

```html
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market St, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:first.last@example.com">first.last@example.com</a>
</address>
```

--------------------------------

### Fastbootstrap Z-Index Utilities: Basic Usage Example

Source: https://fastbootstrap.com/docs/z-index

This HTML snippet demonstrates the basic usage of Fastbootstrap's z-index utility classes to control the stacking order of multiple elements. Elements with higher z-index values will appear on top of elements with lower values.

```html
<div class="z-40 ...">05</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">03</div>
<div class="z-10 ...">02</div>
<div class="z-0 ...">01</div>
```

--------------------------------

### Horizontal rule styling with Bootstrap

Source: https://fastbootstrap.com/docs/reboot

Demonstrates how to style horizontal rules (<hr>) using Bootstrap's utility classes for border, color, and opacity. The example shows default styling and customizations with different border colors and opacities.

```HTML
<hr>
<div class="text-success">
  <hr>
</div>
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">
```

--------------------------------

### Align Items Center Example (HTML)

Source: https://fastbootstrap.com/docs/align-items

Illustrates the 'align-items-center' utility for centering flex items along the container's cross axis.

```html
<div class="d-flex align-items-center ...">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>
```

--------------------------------

### FastBootstrap Height Utilities: Full Height Example

Source: https://fastbootstrap.com/docs/height

Demonstrates setting an element's height to 100% of its parent using the `h-100` class. This requires the parent element to have a defined height for the utility to be effective.

```html
<div class="h-48">
  <div class="h-100 ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>
```

--------------------------------

### FastBootstrap Height Utilities: Viewport Height Example

Source: https://fastbootstrap.com/docs/height

Shows how to make an element span the entire height of the viewport using the `vh-100` class. This utility is useful for creating full-screen elements.

```html
<div class="vh-100"></div>
```

--------------------------------

### Bootstrap Responsive Offset Classes (HTML)

Source: https://fastbootstrap.com/docs/columns

Shows how to use responsive offset classes with specific breakpoints, like `.offset-sm-2` and `.offset-md-0`, to control column positioning across different screen sizes. Includes examples of resetting offsets.

```html
<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>
```

--------------------------------

### Bootstrap align-self-start Example

Source: https://fastbootstrap.com/docs/align-self

Shows how to use the `align-self-start` utility class to position a flex item at the beginning of the cross axis, overriding the container's `align-items` setting. This provides granular control over individual item placement.

```html
<div class="d-flex align-items-stretch gap-4">
  <div>01</div>
  <div class="align-self-start ...">02</div>
  <div>03</div>
</div>
```

--------------------------------

### Align Items Stretch Example (HTML)

Source: https://fastbootstrap.com/docs/align-items

Demonstrates using the 'align-items-stretch' utility to make flex items fill the container's cross axis. This is the default browser behavior for flex items.

```html
<div class="d-flex align-items-stretch gap-4">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>
```

--------------------------------

### Bootstrap Responsive Floated Image with Clearfix (HTML)

Source: https://fastbootstrap.com/docs/columns

Provides an example of creating a responsive floated image using Bootstrap's grid and float utilities, combined with a `.clearfix` wrapper. This ensures text wraps correctly around the image on different screen sizes.

```html
<div class="clearfix">
  <svg class="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3" width="100%" height="210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive floated image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive floated image</text></svg>


  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>
```

--------------------------------

### Responsive gap utilities implementation

Source: https://fastbootstrap.com/docs/gap

Implement responsive gap utilities that adapt to different screen sizes. The framework provides breakpoint-specific gap classes that allow varying spacing based on device dimensions.

```html
<div class="grid gap-2 gap-md-3 gap-lg-5">
  <div class="g-col-6 ...">01</div>
  <div class="g-col-6 ...">02</div>
  <div class="g-col-6 ...">03</div>
  <div class="g-col-6 ...">04</div>
</div>
```

--------------------------------

### Bootstrap Grid Nesting Example (HTML)

Source: https://fastbootstrap.com/docs/grid

This HTML snippet illustrates how to nest columns within an existing column. A new `.row` is created inside a `.col-sm-*` element, and its columns must sum up to 12 or fewer. This allows for complex layouts within a grid structure.

```html
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Include media-breakpoint-between mixin (SCSS/CSS)

Source: https://fastbootstrap.com/docs/breakpoints

Shows how to use the @include media-breakpoint-between mixin to cover a range from one breakpoint to another. The example spans from medium (md) to extra‑large (xl) devices, producing a single media query that applies across that interval. The generated CSS includes comments clarifying its purpose.

```scss
@include media-breakpoint-between(md, xl) { ... }
```

```css
// Example\n// Apply styles starting from medium devices and up to extra large devices\n@media (min-width: 768px) and (max-width: 1199.98px) { ... }
```

--------------------------------

### Bootstrap Grid with All Breakpoints

Source: https://fastbootstrap.com/docs/grid

Shows how to create a Bootstrap grid layout that applies consistently across all device sizes using `.col` and `.col-*` classes. For specific sizing, numbered classes are used; otherwise, `.col` is sufficient for equal distribution.

```html
<div class="container">
  <div class="row">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
  </div>
  <div class="row">
    <div class="col-8">05</div>
    <div class="col-4">06</div>
  </div>
</div>
```

--------------------------------

### Blockquote Styling with Attribution (HTML)

Source: https://fastbootstrap.com/docs/reboot

Demonstrates how to style blockquotes and provide attribution using the blockquote and cite elements. It shows the basic structure and a more advanced structure using figure and figcaption for proper attribution placement.

```html
<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<p>Someone famous in <cite title="Source Title">Source Title</cite></p>
```

```html
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
```

--------------------------------

### FastBootstrap: Responsive Margin Utilities by Breakpoint (CSS)

Source: https://fastbootstrap.com/docs/margin

Shows how to apply margin utilities responsively across different screen sizes using FastBootstrap's breakpoint system. The format `{property}{sides}-{breakpoint}-{size}` allows for granular control, like applying `my-4` only on medium screens and above.

```HTML
<div class="my-3 my-md-4 my-lg-6 ...">my-3 my-md-4 my-lg-6</div>
```

--------------------------------

### HTML Sample Output with SAMP Tag

Source: https://fastbootstrap.com/docs/reboot

The <samp> tag styles text as sample output from a program, using Bootstrap's default monospace font for code-like appearance. Ideal for displaying console or program results in documentation. No additional classes needed; outputs inline monospace text; works best in semantic contexts without complex nesting.

```html
<samp>This text is meant to be treated as sample output from a computer program.</samp>
```

--------------------------------

### Bootstrap 5 Horizontal & Vertical Gutters Example

Source: https://fastbootstrap.com/docs/gutters

Shows how to apply gutter classes like `.g-*` for controlling both horizontal and vertical spacing between columns in Bootstrap 5. This example uses a smaller gutter width to avoid overflow.

```html
<div class="container">
  <div class="row g-3">
    <div class="col-6">
      Custom column padding
    </div>
    <div class="col-6">
      Custom column padding
    </div>
    <div class="col-6">
      Custom column padding
    </div>
    <div class="col-6">
      Custom column padding
    </div>
  </div>
</div>
```

--------------------------------

### Create Description List HTML

Source: https://fastbootstrap.com/docs/reboot

Implements a description list for term-definition pairs using dl, dt, and dd elements. Supports multiple definitions per term. Ideal for glossaries, metadata displays, or dictionary-style content.

```HTML
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Term</dt>
  <dd>Definition for the term.</dd>
  <dd>A second definition for the same term.</dd>
  <dt>Another term</dt>
  <dd>Definition for this other term.</dd>
</dl>
```

--------------------------------

### HTML: Basic Flex Grow Usage

Source: https://fastbootstrap.com/docs/flex-grow

Demonstrates how to allow a flex item to grow and fill available space using the `.flex-grow-1` class in HTML. This is useful for distributing space dynamically within a flex container.

```html
<div class="d-flex">
  <div>01</div>
  <div class="flex-grow-1">02</div>
  <div>03</div>
</div>
```

--------------------------------

### Align Items End Example (HTML)

Source: https://fastbootstrap.com/docs/align-items

Demonstrates the 'align-items-end' utility to align flex items to the end of the container's cross axis.

```html
<div class="d-flex align-items-end ...">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>
```

--------------------------------

### Vertical Divider in Flex Layout

Source: https://fastbootstrap.com/docs/vertical-rule

Shows how vertical rules scale their height in flex layouts. The example includes a flex container with a specified height.

```HTML
<div class="d-flex bd-h-48">
  <!-- bd-h-48: height is 192px -->
  <div class="vr"></div>
</div>
```

--------------------------------

### Responsive Order Utility Application

Source: https://fastbootstrap.com/docs/order

Shows how to apply order utilities at specific breakpoints using responsive variants like `order-md-last`. This allows the order to change based on screen size.

```html
<div class="order-first order-md-last">
  <!-- ... -->
</div>
```

--------------------------------

### Vertical Divider in Stack Layout

Source: https://fastbootstrap.com/docs/vertical-rule

Illustrates the use of vertical dividers within stack layouts. The example shows a horizontal stack with items separated by a vertical divider.

```HTML
<div class="hstack gap-3">
  <div class="text-bg-purple rounded p-4 lh-1 fs-sm">First item</div>
  <div class="text-bg-purple rounded p-4 lh-1 fs-sm ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="text-bg-purple rounded p-4 lh-1 fs-sm">Third item</div>
</div>
```

--------------------------------

### Create Ordered List HTML

Source: https://fastbootstrap.com/docs/reboot

Creates a sequentially numbered list using ordered list elements. Implements basic list items for step-by-step instructions or ranked content. Follows standard HTML list semantics.

```HTML
<ol>
  <li>Here’s an ordered list</li>
  <li>With a few list items</li>
  <li>It has the same overall look</li>
  <li>As the previous unordered list</li>
</ol>
```

--------------------------------

### Bootstrap 5 No Gutters Example

Source: https://fastbootstrap.com/docs/gutters

Demonstrates how to remove gutters between columns in Bootstrap 5 using the `.g-0` class. This removes negative margins from `.row` and horizontal padding from child columns.

```html
<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
```

--------------------------------

### Apply Box Shadows with Utility Classes

Source: https://fastbootstrap.com/docs/box-shadow

These utility classes allow you to quickly add predefined box shadows to elements. They correspond to different shadow sizes and can be applied directly in your HTML. No external dependencies are needed beyond the FastBootstrap framework.

```html
<div class="shadow-sm ..."></div>
<div class="shadow ..."></div>
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
```

--------------------------------

### Apply Negative Skew Transformations

Source: https://fastbootstrap.com/docs/skew

To apply a negative skew transformation, prefix the skew utility class with a hyphen. For example, `-skew-y-6` applies a skew of -6 degrees along the Y-axis.

```html
<img class="-skew-y-6 ...">

```

--------------------------------

### Modify aspect ratio at breakpoint

Source: https://fastbootstrap.com/docs/aspect-ratio

Use media queries to change aspect ratios responsively. This example switches from 4:3 to 2:1 at the medium breakpoint using a CSS variable.

```CSS
.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
```

--------------------------------

### Create custom aspect ratio

Source: https://fastbootstrap.com/docs/aspect-ratio

Override the default aspect ratio by setting a custom CSS variable (--bs-aspect-ratio) directly on the element. This example creates a 2:1 ratio.

```HTML
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  2x1
</div>
```

--------------------------------

### Basic Flex Shrink Usage (HTML)

Source: https://fastbootstrap.com/docs/flex-shrink

Demonstrates how to allow a flex item to shrink using the .flex-shrink-1 utility. This is useful when one item needs to take up available space, potentially pushing other content to a new line.

```html
<div class="d-flex">
  <div>01</div>
  <div class="flex-shrink-1" style="width:256px">02</div>
  <div>03</div>
</div>
```

--------------------------------

### Apply Text Decorations (HTML)

Source: https://fastbootstrap.com/docs/text-decoration

Demonstrates how to apply text decorations such as underline, line-through, overline, and none to paragraph elements using Fastbootstrap utility classes.

```html
<p class="text-decoration-underline ...">The quick brown fox ...</p>
<p class="text-decoration-line-through ...">The quick brown fox ...</p>
<p class="text-decoration-overline ...">The quick brown fox ...</p>
<p class="text-decoration-none ...">The quick brown fox ...</p>
```

--------------------------------

### Customize Vertical Divider Color and Width

Source: https://fastbootstrap.com/docs/vertical-rule

Demonstrates how to change the color and width of vertical dividers using `.border-{size}` and `.text-{color}` classes. Includes examples with different opacity levels.

```HTML
<div class="d-flex gap-5 justify-content-center">
  <div class="d-flex bd-h-32 text-primary">
      <div class="vr border-4 opacity-100"></div>
  </div>
  <div class="d-flex bd-h-32 text-primary">
      <div class="vr border-4 opacity-75"></div>
  </div>
  <div class="d-flex bd-h-32 text-primary">
      <div class="vr border-4 opacity-50"></div>
  </div>
</div>
```

--------------------------------

### Bootstrap align-self-end Example

Source: https://fastbootstrap.com/docs/align-self

Demonstrates the `align-self-end` utility class to align a flex item to the end of the cross axis, overriding the container's `align-items`. This is useful for pushing specific items to the opposite side of the container.

```html
<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-end ...">02</div>
  <div>03</div>
</div>
```

--------------------------------

### HTML: Basic Float Left Utility

Source: https://fastbootstrap.com/docs/floats

Shows how to use the 'float-start' class to align an image to the left within its parent element. This is a fundamental responsive utility.

```html
<img class="float-start ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>
```

--------------------------------

### Bootstrap align-self-auto Example

Source: https://fastbootstrap.com/docs/align-self

Demonstrates the use of the `align-self-auto` utility class in Bootstrap to align a flex item based on its container's `align-items` property. This is useful when you want an item to inherit alignment behavior from its parent.

```html
<div class="d-flex align-items-stretch gap-4">
  <div>01</div>
  <div class="align-self-auto ...">02</div>
  <div>03</div>
</div>
```

--------------------------------

### Bootstrap Horizontal Column Alignment (HTML)

Source: https://fastbootstrap.com/docs/columns

Illustrates various horizontal alignment options for columns within a Bootstrap row, including start, center, end, around, between, and evenly. This provides flexibility in distributing content horizontally.

```html
<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>
```

--------------------------------

### Bootstrap Order-First and Order-Last Classes

Source: https://fastbootstrap.com/docs/columns

Shows how to use `.order-first` and `.order-last` classes to easily place an element at the beginning or end of a flex container, respectively. These classes can be combined with numbered order classes for flexible layout control.

```html
<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>
```

--------------------------------

### Bootstrap Responsive Column Break with Utilities

Source: https://fastbootstrap.com/docs/columns

Illustrates using responsive display utilities like `d-none` and `d-md-block` in conjunction with `w-100` to force column breaks at specific breakpoints. This allows for more granular control over layout responsiveness.

```html
<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>
```

--------------------------------

### FastBootstrap Height Utilities: Max Height Example

Source: https://fastbootstrap.com/docs/height

Illustrates setting the maximum height of an element using the `mh-100` class. This utility respects the parent element's dimensions and limits the child's height accordingly.

```html
<div style="height:100px">
  <div style="height:200px">
    max-height 100%
  </div>
</div>
```

--------------------------------

### Bootstrap align-self-center Example

Source: https://fastbootstrap.com/docs/align-self

Illustrates the `align-self-center` utility class for centering a flex item along the cross axis, independent of the parent container's alignment. This is helpful for visually balancing elements within a flex layout.

```html
<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-center ...">02</div>
  <div>03</div>
</div>
```

--------------------------------

### HTML: Apply Border Opacity Utilities

Source: https://fastbootstrap.com/docs/border-opacity

Demonstrates how to apply border opacity utilities to HTML elements using predefined classes. These classes control the transparency of the border color.

```html
<div class="border-opacity-100 border border-secondary..."></div>
<div class="border-opacity-75 border border-secondary..."></div>
<div class="border-opacity-50 border border-secondary..."></div>
<div class="border-opacity-25 border border-secondary..."></div>
```
Tokens:
Raw