• Wednesday , 1 April 2020

Bootstrap 4 Tutorial 16 – Button Dropdown

Code Canyon

Source Code: https://github.com/SonarSystems/Bootstrap-4-Tutorial-Series


Like our content and want to support us more directly? Help Us, Help You! https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6DF2Q8TR5FB3E

If you like this stuff, as always, show the love through comments, likes, favorites, subscriptions, etc.

Thousands of free videos at

If you have any questions feel free to post them at

Our Website

Facebook – https://www.facebook.com/pages/Sonar-Systems/581403125243822
Twitter – https://twitter.com/SonarSystems
Google+ – https://plus.google.com/+SonarsystemsCoUk/
Donate – https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6DF2Q8TR5FB3E

Our games made using Cocos2d-x
iOS: https://itunes.apple.com/us/artist/sonar-systems/id672545941

Google Play: https://play.google.com/store/apps/developer?id=Sonar+Systems

Check out our Cocos2d-x book to learn how to make games https://www.packtpub.com/game-development/cocos2d-x-game-development-essentials

Original source

3d Ocean

Related Posts


  1. Sonar Systems
    February 27, 2020 at 17:28

    Welcome to this Bootstrap 4 video.

    If you have any questions feel free to post them on our education platform sonarlearning.co.uk

  2. Просто Аккаунт
    February 27, 2020 at 17:28


  3. benard nassary
    February 27, 2020 at 17:28

    Also label dosnt get effect at all.

    <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-12">
    <span class="lbl lbl-pill lbl-default"> Dafault </span>
    <span class="label lbl-pill label-primary"> Primary </span>
    <span class="label lbl-pill label-success">Success</span>
    <span class="label lbl-pill label-info">Info</span>
    <span class="label lbl-pill label-warning">Warning</span>
    <span class="label lbl-pill label-danger">Danger</span>

  4. benard nassary
    February 27, 2020 at 17:28

    <ul class="nav nav-tabs nav-stacked">
    <li class="nav-item ">
    <a href="#" class="nav-link active"> Home </a>
    <li class="nav-item">
    <a href="#" class="nav-link"> About Us </a>
    <li class="nav-item">
    <a href="#" class="nav-link"> Dissabled </a>
    <li class="nav-item">
    <a href="#" class="nav-link disabled"> Contact Us </a>

    <li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Dropdown </a>

    <div class="dropdown-menu">
    <a class="dropdown-item" href="http://www.sonarysystem.co.uk"> Button1 </a>
    <a class="dropdown-item" href="http://www.sonarysystem.co.uk"> Button2 </a>
    <a class="dropdown-item" href="http://www.sonarysystem.co.uk"> Button3 </a>
    <div class="dropdown-divider"> </div>
    <a class="dropdown-item" href="http://www.sonarysystem.co.uk"> Button4 </a>

    Please help me with these code. Drop-down menu doesn't appear what might be a problem. Also i tried on radio button and checkbox i faced the same problem of some features of bootstrap 4 doesn't work as required.

  5. Vitaliy G.
    February 27, 2020 at 17:28

    Could you please briefly expand on what aria-haspopup and aria-expanded mean here? I initially thought that if I'd define aria-expanded as true, the page would load with the dropdown expanded, but that wasn't the case, so it brought me to my question. Thanks!

Leave A Comment

You must be logged in to post a comment.