Typography

---

Typography

Bootstrap 5 provides a wide range of typography classes that allow you to easily style and format text in your web pages. These classes can be applied to various HTML elements such as headings, paragraphs, links, lists, and more. Here are some commonly used typography classes in Bootstrap 5

1. Text Styling Classes
   • text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark: These classes set the color of the text to predefined Bootstrap color themes.
2. Text Alignment Classes
   • text-start, text-center, text-end : These classes align the text to the start, center, or end of the container, respectively.
3. Font Size Classes:
   • fs-1, fs-2, fs-3, fs-4, fs-5, fs-6 : These classes set the font size of the text to predefined values.
4. Font Weight Classes:
   • fw-normal, fw-bold : These classes set the font weight of the text to normal or bold, respectively.
5. Font Style Classes:
   • fst-italic: This class sets the text to italic style.
6. Text Color Classes
   • text-[color]: These classes set the color of the text to a specific color. Replace [color] with the desired color, such as text-primary, text-secondary, text-danger, etc.
7. Text Transformation Classes
   • text-lowercase, text-uppercase, text-capitalize: These classes transform the text to lowercase, uppercase, or capitalize the first letter of each word, respectively.
8. Text Overflow and Text Break Classes:
   • text-overflow-ellipsis, text-overflow-clip, text-break: These classes control the behavior of text overflow and text breaking in case of long text or limited space
9. Word Wrap Classes:
   • word-wrap-break-word: This class enables word wrapping in case of long words that exceed the container width.

Images

---

Images

In Bootstrap 5.3, image components provide a convenient way to display and manipulate images within your web page. These components offer various features such as responsiveness, image optimization, alignment, sizing, captions, and overlays. Let's explore each aspect in more detail:

• Responsiveness: Bootstrap 5.3 includes responsive image classes that automatically scale images based on the screen size. By applying the appropriate classes, such as img-fluid, to your <img> tags, you can ensure that the images adapt and fit nicely within different viewport sizes.
• Image Optimization: Bootstrap 5.3 encourages the use of optimized images to enhance website performance. You can compress and resize your images using external tools or libraries, then include them in your Bootstrap project. Optimized images help reduce page load times and improve overall user experience.
• Image Alignment: You can easily align images using Bootstrap's flexbox utility classes. By adding classes like float-start or float-end to your <img> tags or wrapping them in a container with classes such as d-flex and justify-content-center, you can control the positioning of your images within the page layout.
• Image Sizing: Bootstrap 5.3 provides classes to adjust the size of images, allowing you to make them larger or smaller as needed. By applying classes like w-100 (full width) or h-50 (half height), you can customize the dimensions of your images while maintaining their aspect ratio.
• Image Shapes:Bootstrap includes classes to create rounded, circle, or thumbnail-shaped images. The rounded, rounded-circle, and img-thumbnail classes allow you to add visual styles to your images, giving them a distinct appearance.
• Image Captions: To add captions to your images, Bootstrap 5.3 offers the <figure> and <figcaption> elements. Wrapping an <img> tag with a <figure> element and placing the caption text inside a <figcaption> element allows you to create descriptive captions that accompany your images.
• Image Overlays: Bootstrap 5.3 provides components and classes for creating image overlays, such as the card component or the position-relative class. These features enable you to overlay text, buttons, or other elements on top of your images, allowing for creative and engaging visual effects.

img-fluid

---

---

img-fluid img-thumbnail

---

Image Gallery

---

Image Gallery

In Bootstrap 5.3, an image gallery can be easily created using the built-in components and classes provided by Bootstrap. Here's an explanation of how you can create an image gallery in Bootstrap 5.3.

• Grid System: Bootstrap's grid system allows you to create a responsive layout for your image gallery. You can use the "row" and "col" classes to create a grid structure and define the number of columns you want in each row.
• Card Component: Bootstrap's "card" component is useful for displaying images in a gallery format. You can use the "card" class to create a container for each image in your gallery. Inside the card, you can include the image itself, along with any additional content such as captions or descriptions.
• Image Thumbnails: To display the images as thumbnails, you can use the "img-thumbnail" class provided by Bootstrap. This class adds a small border and padding to the image, making it visually distinct from the surrounding elements.
• Modal: Bootstrap's modal component can be used to display a larger version of an image when clicked. By wrapping the image inside a modal container and adding the necessary attributes and classes, you can create a modal that opens with a larger view of the image.
• Carousel: If you want to create a slideshow-like experience for your image gallery, you can utilize Bootstrap's carousel component. The carousel allows you to display multiple images in a rotating fashion, with options for navigation and autoplay.

Figures & Figcaption

---

Figures & Figcaption

In Bootstrap 5.3, figures are a component used to enhance the presentation of images and media content. The <figure> element, along with the <figcaption> element, is used to wrap and caption the image or media. Here's an explanation of how to use figures in Bootstrap 5.3

Structure the figure: Start by creating a <figure> element and placing the image or media content inside it.

<figure class="figure">: This <figure> element represents the container for the image and its caption. The "figure" class is applied to add default Bootstrap styling to the figure.

<figcaption class="figure-caption"> A caption for the above image. </figcaption> : This <figcaption> element represents the caption for the image. The "figure-caption" class is applied to style the caption text.

Tables

---

Tables

In Bootstrap 5.3, tables can be easily styled and made responsive using the built-in classes and components provided by Bootstrap. Here's an explanation of tables in Bootstrap 5.3:

• Basic Table Structure: To create a basic table, you can use the <table> element with the "table" class. Inside the table, you can define table rows using the <tr> element and table data/cells using the <td> element. You can also use the <th> element to define table headers for each column.
• Table Styling: Bootstrap provides several classes to style tables. You can use classes such as "table-striped" to add alternating background colors to table rows, "table-bordered" to add borders to table cells, and "table-hover" to highlight rows on hover. Additionally, classes like "table-responsive" can be used to make the table horizontally scrollable on smaller screens.
• Table Components: Bootstrap offers various table components that enhance the functionality and appearance of tables. For example, you can use the "thead" element to group table header content, the "tbody" element to group table body content, and the "tfoot" element to group table footer content.
• Table Customization: You can further customize tables using Bootstrap's utility classes. For instance, you can use classes like "text-center" to center-align content within table cells, "text-nowrap" to prevent text wrapping, or "text-truncate" to truncate long text with ellipses.
• Advanced Features: Bootstrap also provides additional features for tables, such as table pagination and table sorting. You can use the "table-responsive" class in combination with pagination classes like "pagination" and "page-link" to create a paginated table. For sorting functionality, you can utilize JavaScript plugins or write custom JavaScript code to handle table sorting.

Bootstrap Normal Table

In Bootstrap 5.3, a normal table refers to a basic table structure that can be easily styled and customized using Bootstrap's classes. Here's an explanation of how to create a normal table in Bootstrap 5.3:

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Bootstrap Table Colors

In Bootstrap 5.3, you can easily apply different colors to tables using the available utility classes. Here's an explanation of the table color options in Bootstrap 5.3

Background Color Classes: Bootstrap also provides utility classes for applying specific background colors to table rows or cells. These classes are applied to the <tr> or <td> elements. The available background color classes are:

• table-primary: Applies a primary background color.
• table-secondary: Applies a secondary background color.
• table-success: Applies a success background color.
• table-info: Applies an info background color.
• table-warning: Applies a warning background color.
• table-danger: Applies a danger background color.
• table-light: Applies a light background color.
• table-dark: Applies a dark background color.

These classes allow you to apply specific colors to table rows or cells to match your design or highlight specific information.

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Striped Table

In Bootstrap 5.3, you can easily apply different colors to tables using the available utility classes. Here's an explanation of the table color options in Bootstrap 5.3

• Add the "table-striped" class: To create a striped table, apply the "table-striped" class to the <table> element. For example, your table declaration would look like this: <table> class="table table-striped">.
• Row Alternation: The "table-striped" class automatically adds alternating background colors to the table rows. By default, Bootstrap uses two background colors: a light color for even rows and a transparent background for odd rows..

By following these steps, you can create a striped table in Bootstrap 5.3. The striped pattern improves readability and helps users visually separate and differentiate rows in a table. Remember to include the necessary Bootstrap CSS and JavaScript files in your project to ensure that the Bootstrap styles and functionalities are properly applied to the table and other elements.

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Striped Table Columns

In Bootstrap 5.3, you can create striped tables by using the "table-striped-columns" class. A striped table alternates the background color of table columns, making it easier to read and distinguish between columns. Here's an explanation of how to create a striped table in Bootstrap 5.3

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Hover Table

In Bootstrap 5.3, you can create a hover effect on table rows using the "table-hover" class. This class adds interactivity to your table by highlighting rows when hovering over them. Here's an explanation of how to create a hover table in Bootstrap 5.3

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Active Rows

Highlight a table row or cell by adding a .table-active class.

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Bordered Table

In Bootstrap 5.3, the "table-bordered" class allows you to add borders to the cells of a table, creating a bordered appearance. Here's an explanation of how to use the "table-bordered" class in Bootstrap 5.3

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Table Bordered with Border-color

Add .table-bordered for borders on all sides of the table and cells.

• .table
• .table-bordered
• .border-primary
• .border-secondary
• .border-danger
• .border-info
• .border-warning
• .border-dark
• .border-light
• .border-success

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Borderless Table

In Bootstrap 5.3, you can create a borderless table by using the "table-borderless" class. This class allows you to remove the borders around the cells of a table, resulting in a clean and borderless appearance. Here's an explanation of how to create a borderless table in Bootstrap 5.3.

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Compact Table

In Bootstrap 5.3, you can create a compact table by using the "table-sm" class. This class reduces the padding and font size of the table, making it more compact and suitable for displaying larger amounts of data in a limited space. Here's an explanation of how to create a compact table in Bootstrap 5.3

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Table Group Dividers

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data

Nested Table

In Bootstrap 5.3, you can create nested tables by placing one table inside another. This technique allows you to organize and structure your data in a hierarchical manner. Here's an explanation of how to create nested tables in Bootstrap 5.3

Heading	Heading
Data	Data
Data	Heading Heading Data Data Data Data

Table With Footer

In Bootstrap 5.3, you can create a table with a footer section to display additional information or summary data. The footer section appears below the table body and can be used to provide context or aggregate data. Here's an explanation of how to create a table with a footer in Bootstrap 5.3

Heading	Heading	Heading	Heading	Heading
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Data	Data	Data	Data	Data
Footer Data	Footer Data	Footer Data	Footer Data	Footer Data

Responsive Table

In Bootstrap 5.3, you can create responsive tables that adapt to different screen sizes using the "table-responsive" class. This class ensures that the table remains horizontally scrollable on smaller screens, preventing it from overflowing the container and maintaining readability. Here's an explanation of how to create a responsive table in Bootstrap 5.3.