Bootstrap - Vertical Rule

Bootstrap's .vr Class

Bootstrap has a class called .vr that lets you make vertical rules or separators in your web pages. The .vr class is a utility class that adds a vertical line with a default height and color.

To use the .vr class on an element, add it to the element's class attribute.

<div class="vr"></div>

The .vr class makes a vertical line with a height of 1em and a light gray color by default. You can change the height and color of the vertical rule to fit your design needs.

To change the height of the vertical rule, use inline styles or make a custom CSS class.

<div class="vr" style="height: 50px;"></div>

Or, make a custom CSS class with the height you want and add it to the element along with the .vr class:

<style>
  .custom-vr {
    height: 50px;
  }
</style>

<div class="vr custom-vr"></div>

You can also change the color of the vertical rule using inline styles or custom CSS classes. Bootstrap uses the currentColor value by default, which takes the color of the parent element. To set a specific color, use the color property:

<div class="vr" style="color: #ff0000;"></div>

Or, make a custom CSS class with the color you want:

<style>
  .red-vr {
    color: #ff0000;
  }
</style>

<div class="vr red-vr"></div>

By using the .vr class and changing its height and color, you can improve the user interface of your web pages. Here are some code examples showing how you can use the vertical rule class to improve UI:

1. Separating sections:

<div class="container">
  <div class="row">
    <div class="col">
      <!-- Content for section 1 -->
    </div>
    <div class="vr" style="height: 200px;"></div>
    <div class="col">
      <!-- Content for section 2 -->
    </div>
  </div>
</div>

2. Making a visual divider between elements:

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">
    <div class="vr"></div>
  </li>
  <li class="list-inline-item">Item 2</li>
</ul>

3. Styling a vertical navigation menu:

<nav>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <div class="vr" style="height: 20px;"></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <div class="vr" style="height: 20px;"></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

These are just a few examples of how you can use Bootstrap's .vr class to improve the UI of your web pages. By using the class and changing its height and color, you can make separators and dividers that look good to organize and structure your content.

Customization Options

Bootstrap's .vr class adds vertical rules to your web pages, but you may want to change the rules' styles to fit your design better. Using CSS, you can change the vertical rules' thickness, color, and length. You can also make custom classes for vertical rules to reuse throughout your project.

<style>
  .custom-vr {
    border-left: 3px solid currentColor;
  }
</style>

<div class="vr custom-vr"></div>

This makes a vertical rule that is 3 pixels thick instead of the default 1 pixel.

You can also change the vertical rule's color using the border-color property or by setting the color property:

<style>
  .custom-vr {
    border-color: #ff0000;
  }
</style>

<div class="vr custom-vr"></div>

Or:

<style>
  .custom-vr {
    color: #ff0000;
  }
</style>

<div class="vr custom-vr"></div>

To change the vertical rule's length, adjust the height property:

<style>
  .custom-vr {
    height: 100px;
  }
</style>

<div class="vr custom-vr"></div>

This makes a vertical rule that is 100 pixels tall.

If you use the same custom styles for vertical rules throughout your project, you can make custom classes to streamline your code and make it easier to read:

<style>
  .thick-vr {
    border-left: 3px solid currentColor;
  }

  .red-vr {
    color: #ff0000;
  }

  .long-vr {
    height: 100px;
  }
</style>

<div class="vr thick-vr red-vr long-vr"></div>

Custom classes let you quickly apply consistent styles to your vertical rules without repeating the same CSS code.

With these customization options, you can make Bootstrap's vertical rules fit perfectly with your web design. By changing the rules' thickness, color, and length, and by making custom classes, you control how the vertical rules look and function in your project.

Usage Examples

Bootstrap's vertical rule class (.vr) separates content, creates visual hierarchy, and improves the user interface of your web pages.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h3>Column 1</h3>
      <p>Content for column 1 goes here.</p>
    </div>
    <div class="vr"></div>
    <div class="col-md-6">
      <h3>Column 2</h3>
      <p>Content for column 2 goes here.</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Section 1</h3>
      <p>Content for section 1 goes here.</p>
      <div class="vr my-4"></div>
      <h3>Section 2</h3>
      <p>Content for section 2 goes here.</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h2>Main Heading</h2>
      <p>Main content goes here.</p>
    </div>
    <div class="vr"></div>
    <div class="col-md-8">
      <h4>Subheading 1</h4>
      <p>Subheading 1 content goes here.</p>
      <div class="vr my-3"></div>
      <h4>Subheading 2</h4>
      <p>Subheading 2 content goes here.</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h2>Featured Content</h2>
      <p>Featured content goes here.</p>
    </div>
    <div class="col-md-4">
      <div class="vr h-100 mx-auto" style="width: 2px;"></div>
    </div>
  </div>
</div>