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
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 want to achieve to have 1 input field, 3 dropdown boxes and one submit button in 5 columns horizontal view inside a form for desktop and tablet view. In mobile view, it should stack with a margin of each field (left or right in desktop or tablet view) and top or bottom on mobile view.
I tried the following on my site
<div class="row">
<div class="col-sm-4"><input placeholder="' . JText::_('COM_BT_MEDIA_ENTER_YOUR_KEYWORD') . '" type="text" name="filter_search" id="filter_search" value="' . $app->input->getString('filter_search') . '" title="' . JText::_('Search') . '" /></div>
<div class="col-sm-2">' . $filterType . '</div>
<div class="col-sm-2">' . $filterOrdering . '</div>
<div class="col-sm-2">' . $filterDirection . '</div>
<div class="col-sm-2">
<a class="btn" href="#" onclick="document.adminForm.submit();">' . JText::_('JSEARCH_FILTER_SUBMIT') . '</a>
</div>
</div>
But the fields or dropdown show stack...
Any ideas on that?
Thanks
To learn bootstrap, make this site your best friend.
To see a demo of your solution look here
Your html elements need to be floated left to stay inline. Heres the HTML solution:
<div class="row">
<div class="col-sm-4 left">
<input type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="dropdown col-sm-2 left">
<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 col-sm-2 left ">
<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 col-sm-2 left">
<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="col-sm-2 left ">
<button class="btn btn-default">Button</button>
</div>
</div>
Here's the CSS
.left{
float: left;
}
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 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
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;}