I have a bootstrap-modal, with header, body and footer.
Now i would add a dropdown-button with dropdown-menu to the modal header. The button is placed correct but if i open the menu the menu is in the middle.
and here the code:
<div class="modal-header">
<div class="row">
<div class="col-xs-6">
<h4 class="modal-title" id="myModalLabel">Max Muster</h4>
</div>
<div class="col-xs-6 text-right">
<div class="dropdown open">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-plus"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
Any suggestions?
Thanks in advance.
You are in the second column col-xs-6.
<div class="row">
<div class="col-xs-6">First column</div>
<div class="col-xs-6">Second column</div>
</div>
The start of the second column is on the left hand, so you have to set the class pull-right
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
http://jsfiddle.net/9nf0afa5/
Related
When I place a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", the dropdown menu appears in the original un-centered position of the dropdown. The dropdown doesn't seem to know that its triggering button has been moved.
The issue is represented in this jsfiddle:
https://jsfiddle.net/dkent600/wyos4ukt
The fiddle contains the following code:
<div style="background-color:grey; text-align:center">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
</ul>
</div>
</div>
Thanks for any clues for how to fix this.
If you add the class btn-group to the .dropdown element, then the dropdown-menu will be positioned properly.
Updated Exmple
<div class="btn-group dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
The reason this works is because the class adds the following CSS. In doing so, the dropdown-menu is positioned absolutely relative to the parent element.
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
Alternatively, you could also add the following:
Updated Example
.dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
Using bootstrap I am trying to get this dropdown menu to appear as a small box in the middle of the page. Like this.
This is the HTML code:
<div class="dropdown">
<button
class="btn btn-default dropdown-toggle"
type="button"
id="dropdownMenu1"
data-toggle="dropdown"
aria-expanded="true">
List
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a></li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a></li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a></li>
</ul>
</div>
Maybe the problem is the standard style of dropdown-menu:
.center {
text-align: center;
}
.dropdown-menu{
width: 200px;
text-align:center !important;
float: none !important;
margin: 0 auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid center">
<div class="col-md-5">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
List
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a>
</li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a>
</li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a>
</li>
</ul>
</div>
<div>
</div>
How about using <select size="1"><option>...</option></select>?
I'm not sure what I'm doing wrong in my code here, but it's this or CSS related. I'm not sure what CSS setting this would be, but here is my navbar section of my html code.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
TTT Stats
<span class="caret"></span>
</button>
<a class="navbar-brand" href="index.php">Scoreboards</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a>
</li>
</ul>
</div>
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Other
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a>
</li>
</ul>
</div>
(If anyone is wondering about the names, its for a garry's mod TTT server)
With that code, here is what the complete navbar looks like.
http://i.imgur.com/75cPTRh.png
I would want the two dropdown buttons side by side on that navbar. Now when they are like that, this leads into my next question tied into this. How do you work bootstrap's dropdown CSS if you have more than one button?
This is what I have in my css at the bottom to align the dropdown by the button, so that it is centered correctly below the button and not way over stuck to the left.
.dropdown-menu {
right: 68%;
left: 10%;
}
If there is more than one button, it still centers all buttons to that point on the page. How do I edit their positions individually?
Add btn-group class
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Scoreboards</a>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
TTT Stats <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a></li>
</ul>
</div>
<div class="btn-group dropdown2">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a></li>
</ul>
</div>
</div>
</div>
</nav>
To answer your first question,
you can place your dropdowns inside a structure like this
<div class="container">
<div class="row">
<div class="col-md-2"> <!-- markup for dropdown 1 --> </div>
<div class="col-md-2"> <!-- markup for dropdown 2 --> </div>
</div>
</div>
You can use col classes like these to make the layout of your page using bootstrap's grid system.
To learn more about them, visit:
http://getbootstrap.com/css/#grid
I'm using Bootstrap and I have two dropdowns next to each other, something like this:
|Dropdown1| |Dropdown2|
I have some values in dropdown1 that have lots of characters and I don't want them to disturb the width as soon as they are pressed. How can I do that ?
Here is my dropdown
<div class="dropdown">
<div class="btn-group" id="storeId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript Tutorial</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
I am new to Bootstrap and I am in the process of getting to know it. I am trying to position a dropdown menu just in the center of the page, I manage to center the link that toggles the menu but this menu shows out of place.
This is what I tried:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
Obviously the link is center because I am using .text-center for the div containing everything, I have tried using the class center-block but it doesn't help. Any hints?
dropdown is a block element, aligning it with text-align:center will not work on block elements. try adding display: inline-block on dropdown div. check out the jsfiddle ex. http://jsfiddle.net/kuyabiye/KLH8S/
<style>
.dropdown-center {
text-align: center;
}
.dropdown-center .dropdown {
display: inline-block;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 dropdown-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->