Bootstrap split button dropdown

In this 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>