Logo v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v3.2.2
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • List Group
  • Lists
  • Modal
  • Offcanvas
  • Pagination
  • Popovers
  • Progress
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Tables
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Media
  • Fullscreen Lightbox
  • Swiper Touch Slider
  • Others
  • Sticky Block
  • Countdown
  • Video Background
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Column Divider

Separate groups of related menu items with a vertical divider.

Example

You can utilize .col-{-sm|-md|-lg|-xl}-divider classes.

  • Preview
  • HTML
$72.46 last transaction
12% since last visit
              
                <div class="row col-sm-divider">
                  <div class="col-sm text-end">
                    <span class="d-block h4 mb-0">$72.46</span>
                    <span class="d-block">last transaction</span>
                  </div>
                  <!-- End Col -->

                  <div class="col-sm text-start">
                    <span class="d-block h4 text-success mb-0">
                      <i class="bi-graph-up"></i> 12%
                    </span>
                    <span class="d-block">since last visit</span>
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->