Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

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>
              
            

Size

Use .link-sm for smaller size.

  • Preview
  • HTML
.link-primary.link-sm .link-secondary.link-sm .link-success.link-sm .link-danger.link-sm .link-warning.link-sm .link-info.link-sm .link-light.link-sm .link-dark.link-sm
              
                <a href="#" class="link-primary link-sm">.link-primary.link-sm</a>
                <a href="#" class="link-secondary link-sm">.link-secondary.link-sm</a>
                <a href="#" class="link-success link-sm">.link-success.link-sm</a>
                <a href="#" class="link-danger link-sm">.link-danger.link-sm</a>
                <a href="#" class="link-warning link-sm">.link-warning.link-sm</a>
                <a href="#" class="link-info link-sm">.link-info.link-sm</a>
                <a href="#" class="link-light link-sm">.link-light.link-sm</a>
                <a href="#" class="link-dark link-sm">.link-dark.link-sm</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 -->