Logo Logo v2.0
Image Description Image Description

No Results

  • Get Support
  • Preview Demo
Logo Logo v2.0
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Dark Mode New
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Navbar Vertical Aside
  • Scrollspy
  • Tables
  • Tables
  • Datatables
  • Sticky Header
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • Datepicker (Flatpickr)
  • Date Range Picker
  • Calendar (Fullcalendar)
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Copy to Clipboard
  • Input Mask
  • Step Forms (Wizards)
  • Add Field
  • Toggle Password
  • Count Characters
  • Form Search
  • Toggle Switch
  • Google reCAPTCHA
  • Charts
  • Chart.js
  • Counter
  • Circles.js (Pie Chart)
  • Others
  • Fullscreen Lightbox
  • Leaflet
  • JSVectorMap
  • SortableJS
  • Sticky Block
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index
  • Opacity

Links

Examples for common link utilities.

Bootstrap Colored Links documentation

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.

  • Preview
  • HTML
Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link
              
                <a href="#" class="link-primary">Primary link</a>
                <a href="#" class="link-secondary">Secondary link</a>
                <a href="#" class="link-success">Success link</a>
                <a href="#" class="link-danger">Danger link</a>
                <a href="#" class="link-warning">Warning link</a>
                <a href="#" class="link-info">Info link</a>
                <a href="#" class="link-light">Light link</a>
                <a href="#" class="link-dark">Dark link</a>
              
            

Link classes

Use .link class for bolder text styling

  • Preview
  • HTML
Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link
              
                <a href="#" class="link link-primary">Primary link</a>
                <a href="#" class="link link-secondary">Secondary link</a>
                <a href="#" class="link link-success">Success link</a>
                <a href="#" class="link link-danger">Danger link</a>
                <a href="#" class="link link-warning">Warning link</a>
                <a href="#" class="link link-info">Info link</a>
                <a href="#" class="link link-light">Light link</a>
                <a href="#" class="link link-dark">Dark link</a>
              
            

Collapse

  • Preview
  • HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read more Read less
              
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <!-- View More - Collapse -->
                <div class="collapse" id="collapseBrand">
                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <!-- End View More - Collapse -->

                <!-- Link -->
                <a class="link-sm link-collapse" href="#collapseBrand" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseBrand">
                  <span class="link-collapse-default">Read more</span>
                  <span class="link-collapse-active">Read less</span>
                </a>
                <!-- End Link -->