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>
Related
I have a wrapper div and inside that div there are some buttons with a drop down, wrapper should have a max-height and an auto scroll.
The problem is if I click on a button, now the drop down always will be placed behind the wrapper, is there way to get the drop down on top of the wrapper
jsbin link
.bs-example
{
display: flex;
flex-direction: column;
margin: 30px;
max-height: 100px;
border: 1px solid #F00;
overflow: auto;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
</div>
There you go a working snippet here
.bs-example
{
display: flex;
flex-direction: column;
margin: 30px;
max-height: 100px;
border: 1px solid #F00;
overflow: auto;
}
.dropdown-menu {
position: fixed !important;
top: auto !important;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <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>
</div>
You can set left as well for align to left of div, I also use !important; to override bootstrap default styles.
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 like the look of this drop down menu fa-fa fonts provided as an example:
Here is what it looks like when clicked:
How could I do this with CSS? The current HTML code I am using is:
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil fa-fw"></i> Edit</li>
<li><i class="fa fa-trash-o fa-fw"></i> Delete</li>
<li><i class="fa fa-ban fa-fw"></i> Ban</li>
<li class="divider"></li>
<li><i class="fa fa-unlock"></i> Make admin</li>
</ul>
</div>
There is a straightforward example in the Bootstrap docs:
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>
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 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