Box

Bootstrap 5 Box

Bootstrap 5 Boxes are layout components that assist in the creation of build components for CSS utility purposes.

Bootstrap Box component can become any element from ElementType like div, span, img, video etc.

Span

Div

Paragraph

Section

HTML

html

<span>Span</span>
<div>Div</div>
<p>Paragraph</p>
<section>Section</section>

Display

We can define display styles for our boxes by giving our div a class of d and then appending the display style we want (flex, block, inline). For example <div class="d-flex">Display Flex</div>, for a display style of flex.

Display FLex

Display Block

Display Inline

HTML

html

<div class="d-flex">Display Flex</div>
<div class="d-block">Display Block</div>
<div class="d-inline">Display Inline</div>

Flex

To determine the flex orientation of your elements. We add a flex class to our element, which adds the direction ( column or row). For example <div class="d-flex flex-column"></div>.

Coloumn

row

HTML

html

<div class="d-flex flex-column">
  <p>Coloumn</p>
  <p>Coloumn</p>
  <p>Coloumn</p>
</div>
<div class="d-flex flex-row ">
  <p>row</p>
  <p>row</p>
  <p>row</p>
</div>

Colors

Text color can be set in elements by giving the element a class of text and appending a color code. For example <div class="text-danger">Danger</div>.

Danger

Success

Warning

Primary

HTML

html

<div class="text-danger">Danger</div>
<div class="text-success">Success</div>
<div class="text-warning">Warning</div>
<div class="text-primary">Primary</div>

Background Colors

Elements can be given a backdrop color with the Contrast Boostrap 5 Box component by adding the bg class and appending the desired color code to it. For example <div class="bg-danger">Danger</div>.

HTML

html

<div class="bg-danger">Danger</div>
<div class="bg-success">Success</div>
<div class="bg-warning">Warning</div>
<div class="bg-primary">Primary</div>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Table

Breadcrumb