Edit these docs Rate these docs

Scrollbar and SmoothScroll

Bootstrap Scrollbar and SmoothScroll

Bootstrap smooth scroll is an animated movement from a trigger — such as button, link or any other clickable element — to another place of the same page.


Bootstrap SmoothScroll MDB Pro component

Click on the links below to see the live example

To achieve a Smooth Scroll effect, add the class .smooth-scroll to the parent element of your links



        <!--Navigation links with a Smooth Scroll effect-->
        <ul class="smooth-scroll list-unstyled">
          <li>
            <h5><a href="#test1">Click to scroll to section 1</a></h5>
          </li>
          <br>
          <li>
            <h5><a href="#test2">Click to scroll to section 2</a></h5>
          </li>
          <br>
        </ul>

        <!--Dummy sections with IDs coressponding with the links above-->
        <div id="test1">
          <h3>Section 1</h3>
          <hr>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
        </div>


        <div id="test2">
          <h3>Section 2</h3>
          <hr>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
        </div>

      

        // If you use .navbar with .smooth-scroll, use this code to avoid overlapping navigation to a header.

        #test1::before,
        #test2::before {
          display: block; 
          content: " "; 
          margin-top: -65px;
          height: 65px;
          visibility: hidden;
        }
      

Section 1


Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

Section 2


Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

Perfect scrollbar for an image

image


          <div class="my-custom-scrollbar my-custom-scrollbar-primary">
            <img alt="image" src="https://mdbootstrap.com/img/Photos/Others/food3.jpg"/>
          </div>

      


          .my-custom-scrollbar {
            position: relative;
            width: 800px;
            height: 400px;
            overflow: auto;
          }

      


          var myCustomScrollbar = document.querySelector('.my-custom-scrollbar');
          var ps = new PerfectScrollbar(myCustomScrollbar);

          var scrollbarY = myCustomScrollbar.querySelector('.ps.ps--active-y>.ps__scrollbar-y-rail');

          myCustomScrollbar.onscroll = function() {
            scrollbarY.style.cssText = `top: ${this.scrollTop}px!important; height: 400px; right: ${-this.scrollLeft}px`;  
          }
      
      

Material colors scrollbar



        <div class="scrollbar scrollbar-primary">
          <div class="force-overflow"></div>
        </div>

      


        .scrollbar {
        margin-left: 30px;
        float: left;
        height: 300px;
        width: 65px;
        background: #fff;
        overflow-y: scroll;
        margin-bottom: 25px;
        }
        .force-overflow {
        min-height: 450px;
        }

        .scrollbar-primary::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-primary::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #4285F4; }

        .scrollbar-danger::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-danger::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-danger::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #ff3547; }

        .scrollbar-warning::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-warning::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-warning::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #FF8800; }

        .scrollbar-success::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-success::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-success::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #00C851; }

        .scrollbar-info::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-info::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-info::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #33b5e5; }

        .scrollbar-default::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-default::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-default::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #2BBBAD; }

        .scrollbar-secondary::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-secondary::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-secondary::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #aa66cc; }

      
Choose one of the following classes:
  • .scrollbar-primary
  • .scrollbar-secondary
  • .scrollbar-default
  • .scrollbar-info
  • .scrollbar-success
  • .scrollbar-warning
  • .scrollbar-danger

Gradient scrollbar



        <div class="scrollbar scrollbar-lady-lips">
          <div class="force-overflow"></div>
        </div>

      


        .scrollbar-juicy-peach::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-juicy-peach::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-juicy-peach::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left top, right top, from(#ffecd2), to(#fcb69f));
        background-image: -webkit-linear-gradient(left, #ffecd2 0%, #fcb69f 100%);
        background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); }

        .scrollbar-young-passion::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-young-passion::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-young-passion::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left top, right top, from(#ff8177), color-stop(0%, #ff867a),
        color-stop(21%, #ff8c7f), color-stop(52%, #f99185), color-stop(78%, #cf556c), to(#b12a5b));
        background-image: -webkit-linear-gradient(left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%,
        #b12a5b 100%);
        background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%,
        #b12a5b 100%); }

        .scrollbar-lady-lips::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-lady-lips::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-lady-lips::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
        to(#fecfef));
        background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
        background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); }

        .scrollbar-sunny-morning::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-sunny-morning::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-sunny-morning::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #f6d365 0%, #fda085 100%);
        background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); }

        .scrollbar-rainy-ashville::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-rainy-ashville::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-rainy-ashville::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a6c1ee));
        background-image: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a6c1ee 100%);
        background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); }

        .scrollbar-frozen-dreams::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-frozen-dreams::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-frozen-dreams::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#fdcbf1), color-stop(1%, #fdcbf1),
        to(#e6dee9));
        background-image: -webkit-linear-gradient(bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
        background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%); }

        .scrollbar-warm-flame::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-warm-flame::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-warm-flame::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
        background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); }

        .scrollbar-night-fade::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-night-fade::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-night-fade::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
        background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); }

        .scrollbar-spring-warmth::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-spring-warmth::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-spring-warmth::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
        background-image: -webkit-linear-gradient(bottom, #fad0c4 0%, #ffd1ff 100%);
        background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); }

        .scrollbar-winter-neva::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-winter-neva::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-winter-neva::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #a1c4fd 0%, #c2e9fb 100%);
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); }

        .scrollbar-dusty-grass::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-dusty-grass::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-dusty-grass::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
        background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); }

        .scrollbar-tempting-azure::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-tempting-azure::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-tempting-azure::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #84fab0 0%, #8fd3f4 100%);
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }

        .scrollbar-heavy-rain::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-heavy-rain::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-heavy-rain::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#cfd9df), to(#e2ebf0));
        background-image: -webkit-linear-gradient(bottom, #cfd9df 0%, #e2ebf0 100%);
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); }

        .scrollbar-amy-crisp::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-amy-crisp::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-amy-crisp::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #a6c0fe 0%, #f68084 100%);
        background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); }

        .scrollbar-mean-fruit::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-mean-fruit::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-mean-fruit::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #fccb90 0%, #d57eeb 100%);
        background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); }

        .scrollbar-deep-blue::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-deep-blue::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-deep-blue::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #e0c3fc 0%, #8ec5fc 100%);
        background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); }

        .scrollbar-ripe-malinka::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-ripe-malinka::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
        background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); }

        .scrollbar-cloudy-knoxville::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-cloudy-knoxville::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-cloudy-knoxville::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #fdfbfb 0%, #ebedee 100%);
        background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); }

        .scrollbar-morpheus-den::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-morpheus-den::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-morpheus-den::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
        background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
        background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); }

        .scrollbar-rare-wind::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-rare-wind::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-rare-wind::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
        background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); }

        .scrollbar-near-moon::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-near-moon::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-near-moon::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
        background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
        background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%); }

      
Choose one of the following classes:
  • .scrollbar-juicy-peach
  • .scrollbar-young-passion
  • .scrollbar-lady-lips
  • .scrollbar-sunny-morning
  • .scrollbar-rainy-ashville
  • .scrollbar-frozen-dreams
  • .scrollbar-warm-flame
  • .scrollbar-night-fade
  • .scrollbar-spring-warmth
  • .scrollbar-winter-neva
  • .scrollbar-dusty-grass
  • .scrollbar-tempting-azure
  • .scrollbar-heavy-rain
  • .scrollbar-amy-crisp
  • .scrollbar-mean-fruit
  • .scrollbar-deep-blue
  • .scrollbar-ripe-malinka
  • .scrollbar-cloudy-knoxville
  • .scrollbar-morpheus-den
  • .scrollbar-rare-wind
  • .scrollbar-near-moon

Scrollbar options



        <div class="scrollbar square scrollbar-lady-lips thin">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar square scrollbar-lady-lips">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-black bordered-black square thin">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-black bordered-black square">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-pink bordered-pink thin">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-pink bordered-pink">
          <div class="force-overflow"></div>
        </div>

      

        .scrollbar-pink::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-pink::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-pink::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #ec407a; }

        .scrollbar-indigo::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-indigo::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-indigo::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #3f51b5; }

        .scrollbar-black::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-black::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-black::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #000; }

        .scrollbar-lady-lips::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-lady-lips::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-lady-lips::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
        to(#fecfef));
        background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
        background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); }

        .scrollbar-near-moon::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-near-moon::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-near-moon::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
        background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
        background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%); }

        .bordered-pink::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #ec407a; }

        .bordered-pink::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .bordered-indigo::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #3f51b5; }

        .bordered-indigo::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .bordered-black::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #000; }

        .bordered-black::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .square::-webkit-scrollbar-track {
        border-radius: 0 !important; }

        .square::-webkit-scrollbar-thumb {
        border-radius: 0 !important; }

        .thin::-webkit-scrollbar {
        width: 6px; }
      
Choose one of the following classes:
  • .square
  • .thin
  • .bordered-primary
  • .bordered-secondary
  • .bordered-default
  • .bordered-info
  • .bordered-success
  • .bordered-warning
  • .bordered-danger
  • .bordered-black
  • .bordered-pink
  • .bordered-indigo

Scrollbar usage within cards

First title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Second title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Third title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Fourth title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.



        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-6 mb-4">

            <!-- Exaple 1 -->
            <div class="card example-1 scrollbar-ripe-malinka">
              <div class="card-body">
                <h4 id="section1"><strong>First title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-6 mb-4">

            <!-- Exaple 1 -->
            <div class="card example-1 square scrollbar-cyan bordered-cyan">
              <div class="card-body">
                <h4 id="section1"><strong>Second title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-6 mb-4">

            <!-- Exaple 1 -->
            <div class="card example-1 scrollbar-deep-purple bordered-deep-purple thin">
              <div class="card-body">
                <h4 id="section1"><strong>Third title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-6">

            <!-- Exaple 1 -->
            <div class="card example-1 square scrollbar-dusty-grass square thin">
              <div class="card-body">
                <h4 id="section1"><strong>Fourth title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

      


        .scrollbar-deep-purple::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-deep-purple::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-deep-purple::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #512da8; }

        .scrollbar-cyan::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-cyan::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-cyan::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #00bcd4; }

        .scrollbar-dusty-grass::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-dusty-grass::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-dusty-grass::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
        background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); }

        .scrollbar-ripe-malinka::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-ripe-malinka::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
        background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); }

        .bordered-deep-purple::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #512da8; }

        .bordered-deep-purple::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .bordered-cyan::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #00bcd4; }

        .bordered-cyan::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .square::-webkit-scrollbar-track {
        border-radius: 0 !important; }

        .square::-webkit-scrollbar-thumb {
        border-radius: 0 !important; }

        .thin::-webkit-scrollbar {
        width: 6px; }

        .example-1 {
        position: relative;
        overflow-y: scroll;
        height: 200px; }
      

Scrollbar within form MDB Pro component

Sign up

Forgot Password?

or Sign in with:

SIGN UP

Have an account? Log in



      <div class="row">

        <!-- Grid column -->
        <div class="col-md-10 col-lg-8 col-xl-5 mb-4">

          <section class="form-elegant scrollbar-light-blue">

            <!--Form without header-->
            <div class="card">

              <div class="card-body mx-4">

                <!--Header-->
                <div class="text-center">
                  <h3 class="dark-grey-text mb-5"><strong>Sign up</strong></h3>
                </div>

                <!--Body-->
                <div class="md-form">
                  <input type="text" id="Form-name1" class="form-control">
                  <label for="Form-name1">Your name</label>
                </div>

                <div class="md-form">
                  <input type="text" id="Form-surname1" class="form-control">
                  <label for="Form-surname1">Your surname</label>
                </div>

                <div class="md-form">
                  <input type="text" id="Form-email1" class="form-control">
                  <label for="Form-email1">Your email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass1" class="form-control">
                  <label for="Form-pass1">Your password</label>
                  <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
                      Password?</a></p>
                </div>

                <div class="text-center mb-3">
                  <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                  with:</p>

                <div class="row my-3 d-flex justify-content-center">
                  <!--Facebook-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f blue-text text-center"></i></button>
                  <!--Twitter-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter blue-text"></i></button>
                  <!--Google +-->
                  <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g blue-text"></i></button>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer mx-5 pt-3 mb-1">
                <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
                    Sign Up</a></p>
              </div>

            </div>
            <!--/Form without header-->

          </section>

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-10 col-lg-8 col-xl-5 mx-xl-auto">

          <!--Section: Live preview-->
          <section class="form-dark scrollbar-dusty-grass thin square">

            <!--Form without header-->
            <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
              <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">

                <!--Header-->
                <div class="text-center">
                  <h3 class="white-text mb-5 mt-4 font-weight-bold"><strong>SIGN</strong> <a class="green-text font-weight-bold"><strong>
                        UP</strong></a></h3>
                </div>

                <!--Body-->
                <div class="md-form">
                  <input type="text" id="Form-name5" class="form-control white-text">
                  <label for="Form-name5">Name</label>
                </div>
                <div class="md-form">
                  <input type="text" id="Form-surname5" class="form-control white-text">
                  <label for="Form-surname5">Surname</label>
                </div>
                <div class="md-form">
                  <input type="text" id="Form-email5" class="form-control white-text">
                  <label for="Form-email5">Email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass5" class="form-control white-text">
                  <label for="Form-pass5">Password</label>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="checkbox6">
                    <label for="checkbox6" class="form-check-label white-text">Accept the<a href="#" class="green-text font-weight-bold">
                        Terms and Conditions</a></label>
                  </div>
                </div>

                <!--Grid row-->
                <div class="row d-flex align-items-center mb-4">

                  <!--Grid column-->
                  <div class="text-center mb-3 col-md-12">
                    <button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign in</button>
                  </div>
                  <!--Grid column-->
                </div>
                <!--Grid row-->

                <!--Grid column-->
                <div class="col-md-12">
                  <p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#" class="green-text ml-1 font-weight-bold">
                      Log in</a></p>
                </div>
                <!--Grid column-->

              </div>
            </div>
            <!--/Form without header-->

          </section>
          <!--Section: Live preview-->

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    


      .form-elegant .font-small {
      font-size: 0.8rem; }

      .form-elegant .z-depth-1a {
      -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
      box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

      .form-elegant .z-depth-1-half,
      .form-elegant .btn:hover {
      -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
      box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

      .form-elegant,
      .form-dark {
      position: relative;
      height: 604px;
      overflow-y: scroll;
      }

      .form-dark .font-small {
      font-size: 0.8rem; }

      .form-dark [type="radio"] + label,
      .form-dark [type="checkbox"] + label {
      font-size: 0.8rem; }

      .form-dark [type="checkbox"] + label:before {
      top: 2px;
      width: 15px;
      height: 15px; }

      .form-dark .md-form label {
      color: #fff; }

      .form-dark input[type=text]:focus:not([readonly]) {
      border-bottom: 1px solid #00C851;
      -webkit-box-shadow: 0 1px 0 0 #00C851;
      box-shadow: 0 1px 0 0 #00C851; }

      .form-dark input[type=text]:focus:not([readonly]) + label {
      color: #fff; }

      .form-dark input[type=password]:focus:not([readonly]) {
      border-bottom: 1px solid #00C851;
      -webkit-box-shadow: 0 1px 0 0 #00C851;
      box-shadow: 0 1px 0 0 #00C851; }

      .form-dark input[type=password]:focus:not([readonly]) + label {
      color: #fff; }

      .form-dark input[type="checkbox"] + label:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 17px;
      height: 17px;
      z-index: 0;
      border: 1.5px solid #fff;
      border-radius: 1px;
      margin-top: 2px;
      -webkit-transition: 0.2s;
      transition: 0.2s; }

      .form-dark input[type="checkbox"]:checked + label:before {
      top: -4px;
      left: -3px;
      width: 12px;
      height: 22px;
      border-style: solid;
      border-width: 2px;
      border-color: transparent #00c851 #00c851 transparent;
      -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      transform: rotate(40deg);
      -webkit-backface-visibility: hidden;
      -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
      transform-origin: 100% 100%; }

      .scrollbar-light-blue::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #F5F5F5;
      border-radius: 10px; }

      .scrollbar-light-blue::-webkit-scrollbar {
      width: 12px;
      background-color: #F5F5F5; }

      .scrollbar-light-blue::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #82B1FF; }

      .scrollbar-dusty-grass::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #F5F5F5;
      border-radius: 10px; }

      .scrollbar-dusty-grass::-webkit-scrollbar {
      width: 12px;
      background-color: #F5F5F5; }

      .scrollbar-dusty-grass::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); }

      .square::-webkit-scrollbar-track {
      border-radius: 0 !important; }

      .square::-webkit-scrollbar-thumb {
      border-radius: 0 !important; }

      .thin::-webkit-scrollbar {
      width: 6px; }

    

Edit these docs Rate these docs

Getting started : download & setup


Download

All components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now