Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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
Bootstrap split button dropdown

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
bootstrap split button dropdown size

<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
bootstrap split button dropdown menu items expand upwards

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

bootstrap tutorial for beginners

No comments:

Post a Comment

It would be great if you can help share these free resources