Bootstrap dropdowns Css example

Ready to use bootstrap css class, List css class and dropdown css from bootstrap framework.

Bootstrap list groups dropdowns

Here we see how we can use bootstrap ready to use class for list item, UL, LI , div, Span, Link, This will really help developing a webpage faster, you also can customize the class or you can write an additional class on top of that.

Bootstrap listgroups

  • Item 1 - Active Item
  • Item 2 - Disabled Item
  • Item 3
  • Item 4
  • Item 5

Now let's look at the code behind the above Bootstrap listgroups ul, li implementation

<ul class="list-group">            
<li class="list-group-item active">Item 1 - Active Item</li>
<li class="list-group-item disabled">Item 2 - Disabled Item</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
<li class="list-group-item">Item 5</li>
</ul>

Just make sure you have added the bootstrap reference.

<link href="~/Content/bootstrap.css" rel="stylesheet" />

Bootstrap ListItems

Simple ListItem Example using bootstrap css class

Code for above Bootstrap ListItems

<select class="list-group">
<option class="list-group-item active">Item 1 - Active Item</option>
<option class="list-group-item disabled">Item 2 - Disabled Item</option>
<option class="list-group-item">Item 3</option>
<option class="list-group-item">Item 4</option>
<option class="list-group-item">Item 5</option>
</select>

Multi Select ListItem Example

this is Multi Select ListItem example using bootstrap css class

Now let's look at the code for above Bootstrap Multi Select ListItem implementation

            
<!--Multi Select ListItem-->
            
<select class="list-group" multiple="multiple" >
<option class="list-group-item active">Item 1 - Active Item</option>
<option class="list-group-item disabled">Item 2 - Disabled Item</option>
<option class="list-group-item">Item 3</option>
<option class="list-group-item">Item 4</option>
<option class="list-group-item">Item 5</option>
</select>
Bootstrap Examples | Join CSS Course