Dividers

Bootstrap 5 Dividers

Divider lines for Bootstrap 5 layouts. Examples of horizontal divider lines (hr) as well as vertical divider lines for clearer organization of your content.

Basic example

The default divider is 1px thick and dark gray in color. But MDB prefers slightly more subtle elements, so by adding the hr class to the <hr> element we add a light gray color to the divider. However, so that the divider does not lose its visibility, we enlarge it to 2px thick.

        
            
          export default function App() {
            return (
              <hr className="hr" />
            )}

Basic vertical

We can easily create a vertical divider using the vr class. However, we must remember to define its height using inline CSS:

Text

Text

        
            
          export default function App() {
            return (
              <!-- Flexbox for demo purpose -->
              <div className="d-flex">
                <!-- Element on the left -->
                <div className="px-4">
                  <p>Text</p>
                </div>

                <!-- Vertical divider -->
                <div className="vr" style={{ height: '250px' }}></div>

                <!-- Element on the right -->
                <div className="px-4">
                  <p>Text</p>
                </div>
              </div>
            )}

Blurry horizontal

By adding the hr-blurry class, we can make the divider blur at the edges. These types of dividers are often used for decorative purposes:

        
            
          export default function App() {
            return (
              <hr className="hr hr-blurry" />
            )}

Blurry vertical

It works similarly with vertical dividers - just add the vr-blurry class:

Text

Text 2

        
            
          export default function App() {
            return (
              <div className="vr vr-blurry" style={{ height: '250px' }}></div>
            )}

Blurry divider practical example

Below is an example, of how these blurry dividers are presented within a section:

5000+
Components
490+
Design blocks
100+
Templates
28
Plugins
        
            
          export default function App() {
            return (
              <div className="vr vr-blurry" style={{ height: '250px' }}></div>
                <section class="text-center">
                  <div className="row">
                    <div className="col-lg-3 col-md-6 mb-5 mb-md-5 mb-lg-0 position-relative">
                      <i className="fas fa-cubes fa-3x text-primary mb-4"></i>
                      <h5 className="text-primary fw-bold mb-3">5000+</h5>
                      <h6 className="fw-normal mb-0">Components</h6>
                      <div className="vr vr-blurry position-absolute my-0 h-100 d-none d-md-block top-0 end-0"></div>
                    </div>
          
                    <div className="col-lg-3 col-md-6 mb-5 mb-md-5 mb-lg-0 position-relative">
                      <i className="fas fa-layer-group fa-3x text-primary mb-4"></i>
                      <h5 className="text-primary fw-bold mb-3">490+</h5>
                      <h6 className="fw-normal mb-0">Design blocks</h6>
                      <div className="vr vr-blurry position-absolute my-0 h-100 d-none d-md-block top-0 end-0"></div>
                    </div>
          
                    <div className="col-lg-3 col-md-6 mb-5 mb-md-0 position-relative">
                      <i className="fas fa-image fa-3x text-primary mb-4"></i>
                      <h5 className="text-primary fw-bold mb-3">100+</h5>
                      <h6 className="fw-normal mb-0">Templates</h6>
                      <div className="vr vr-blurry position-absolute my-0 h-100 d-none d-md-block top-0 end-0"></div>
                    </div>
          
                    <div className="col-lg-3 col-md-6 mb-5 mb-md-0 position-relative">
                      <i className="fas fa-plug fa-3x text-primary mb-4"></i>
                      <h5 className="text-primary fw-bold mb-3">28</h5>
                      <h6 className="fw-normal mb-0">Plugins</h6>
                    </div>
                  </div>
                </section>
              </div>
            })