I have this code
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
which looks like
I want to add icon like cog insteaqd of Text like this
I have tried this
<button type="button" class="glyphicon glyphicon-cog"></button>
buts not working
For a button, the icon needs to go inside the button as the button's contents, so instead of <button type="button" class="glyphicon glyphicon-cog"></button>
it should be
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span>
</button>
Edit: to add the caret in Bootstrap, you use <span class="caret"></span>
So the end result to get a button with a cog and dropdown caret is:
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span><span class="caret"></span>
</button>
When I paste that code into Bootstrap's homepage, I get this:
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-cog"></span></button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
You can use this code
Just add this span tag
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
See this DEMO
Related
I'm trying to create a split dropdown button for my Django website and I'm using Bootstrap 3. Following is my code for the same:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li>
<div class="btn-group">
<button type="button" class="btn btn-default navbar-btn">Action</button>
<button type="button" data-toggle="dropdown" class="btn btn-default navbar-btn dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</li>
But I'm getting this kind of weird output.
I'm stuck at this problem from an hour. What am I doing wrong here? Why does the split arrow is not showing properly?
I think your other CSS conflict, I have added demo check now
Your code is true
<div class="btn-group">
<button type="button" class="btn btn-default navbar-btn">Action</button>
<button type="button" data-toggle="dropdown" class="btn btn-default navbar-btn dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
https://jsfiddle.net/lalji1051/5yoe2uz1/2/
I have a scrollable bootstrap nav tab by making the tab-pane css be this:
.tab-pane {
height:300px;
overflow-y:scroll;
}
I have a bootstrap drop down that is configured to have the menu pop up and the menu is getting cut off. My dropdown code is:
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Wondering if there is a solution to this.
http://jsfiddle.net/jqntuxvf/3/
You can add additional padding-top in tab-pane class so the drop down menu have some space
Here is edited fiddle from yours http://jsfiddle.net/jqntuxvf/13/
How colud i make bootstrap dropdown button on center.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
keep searching our site listening audio episodes
<span class="fa fa-play pull-right"></span>
</button>
<ul class="dropdown-menu col-md-6" aria-labelledby="dropdownMenu1">
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
Thanks in advance.
Use this code in your code
.dropdown-toggle{position: relative;}
.fa-play{position: absolute;
margin: 0px auto;
left: 0;
right: 0;}
You can go through below code.
I have added style="line-height: 20px;vertical-align:middle;" to span
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
keep searching our site listening audio episodes
<span class="fa fa-play pull-right" style="line-height: 20px;vertical-align:middle;"></span>
</button>
<ul class="dropdown-menu col-md-6" aria-labelledby="dropdownMenu1">
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
I have a problem where I need to align several dropdowns horizontally. I have tried with pure table tags and it works but I suspect it is bad practice. Here is a working fiddle http://jsfiddle.net/1440c8a6/5/
Here is HTML code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="pull-left">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
<div class="pull-right">
<a class="btn btn-warning btn-sm" href="#" role="button">button1</a>
<a class="btn btn-success btn-sm" href="#" role="button">button2</a>
</div>
<br />
<br />
</div>
</div>
</div>
As you can see I am trying to align dropdowns in left part as buttons in right part:
I have tried with this structure but not sure if this is good or bad:
<table>
<tr>
<td>first div here</td>
<td>second div here</td>
<tr>
</table>
Set display:inline-block to .dropdown
CSS
.dropdown{
display: inline-block;
}
DEMO HERE
I am trying to add an inline bootstrap dropdown, text field, dropdown and then a button. The problem I have is that the second dropdown before the green button still as a radius on the top right and bottom corners, as seen in the screen shot below:
My question is, is there a way to do this just using the bootstrap mark up, or will I just have to target the second dropdown with custom CSS? The code I have so far is below:
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<button type="button" class="btn btn-success">Go</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
Use this:
.dropdown-menu:nth-child(2){border-radius:0;}