Bootstrap split button dropdown

Suggested Video Tutorials
Part 16 - Bootstrap icons
Part 17 - Bootstrap dropdown
Part 18 - Bootstrap button group



In this video we will discuss how to create split button dropdown using bootstrap



Split buttons have the primary action on the left and the rest of the actions are available as drop down menu items on the right


Here is the HTML

<div class="btn-group">

    <button class="btn btn-primary">SQL Server</button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>

To change the size of the split button dropdowns use btn-group-lg, btn-group-sm or btn-group-xs classes

<div class="btn-group btn-group-lg">

    <button class="btn btn-primary">

        SQL Server

    </button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>

<div class="btn-group btn-group-sm">

    <button class="btn btn-primary">

        SQL Server

    </button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>

<div class="btn-group btn-group-xs">

    <button class="btn btn-primary">

        SQL Server

    </button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>

To exapnd the menu items of a split button dropdown upwards use dropup class

<div class="btn-group btn-group-lg dropup">

    <button class="btn btn-primary">

        SQL Server

    </button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>

<div class="btn-group btn-group-sm dropup">

    <button class="btn btn-primary">

        SQL Server

    </button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>

<div class="btn-group btn-group-xs dropup">

    <button class="btn btn-primary">

        SQL Server

    </button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

        <li><a href="#">C#</a></li>

        <li><a href="#">ASP.NET</a></li>

        <li><a href="#">ADO.NET</a></li>

    </ul>

</div>