I tried to make a simple dropdown menu with Bootstrap but it appears on the bottom of the page. What's going wrong?
.dropdown-informatie {
overflow: hidden;
float: left;
}
.dropdown-pagina {
float: left;
overflow: hidden;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1> Test </h1>
<p>Test</p>
<div class="dropdown-pagina">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Pagina's <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">Pagina 1</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 2</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
<div class="dropdown-informatie">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Informatie <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">informatie 1</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 2</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
YOUR NEW CODE
Instead of using "dropdown-pagina" as a class you will need to use just dropdown. Then a second and third class for pagina and informatie can be made for specific styling as dropdown is a defined Bootstrap class.
The structure for a Bootstrap 3 drop down is as follows:
div.container {
margin-top: 20px;
}
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
Related
My page is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:layout="http://www.ultraq.net/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
</head>
<body>
<div layout:fragment="content">
<div th:with="rowW='row col-md-9',userNameW='col-md-1',deviceIdW='col-md-4',timestampW='col-md-4',reasonW='col-md-2'">
<div><span th:text="'function='+${function}"></span></div>
<div th:unless="${function} != null and ${function} == 'save'">
<div class="col-md-3 btn btn-primary" th:classappend="rowW">New Card</div>
</div>
<div th:if="${function} != null and ${function} == 'save'">
<div class="col-md-3 btn btn-primary" th:classappend="rowW">New Card</div>
</div>
</div>
</div>
</body>
</html>
If function is null, the layout is displayed. If function is card the layout is not displayed:
For function=null:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/resources/pwstrength.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navigation">
<div id="navbar-examle" class="navbar navbar-static">
<div class="navbar-inner">
<div id="a" class="container" style="width: auto;">
<a class="brand" href="#" style="float:left;"><img
src="/images/Dadavatar.png"><span>My Project</span></a>
<ul id="b" class="nav" role="navigation">
<li id="c" class="dropdown" style="float:left;">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
<ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>English</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Administration</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div><span>function=null</span></div>
<div>
<div class="col-md-3 btn btn-primary rowW">New Card</div>
</div>
</div>
</div>
<br>
<br />
<div id="qr">
<p>
<span>Scan this Barcode using Google Authenticator app on your phone</span>
Android
<span>and</span>
iPhone
</p>
</div>
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
For function=save:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/resources/pwstrength.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navigation">
<div id="navbar-examle" class="navbar navbar-static">
<div class="navbar-inner">
<div id="a" class="container" style="width: auto;">
<a class="brand" href="#" style="float:left;"><img
src="/images/Dadavatar.png"><span>My Project</span></a>
<ul id="b" class="nav" role="navigation">
<li id="c" class="dropdown" style="float:left;">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
<ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>English</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Administration</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div><span>function=save</span></div>
<div>
<div class="col-md-3 btn btn-primary rowW">New Card</div>
</div>
</div>
</div>
<br>
<br />
<div id="qr">
<p>
<span>Scan this Barcode using Google Authenticator app on your phone</span>
Android
<span>and</span>
iPhone
</p>
</div>
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
The following is the diff output for the two files:
$ diff thymeleaf*
91c91,92
< <div><span>function=null</span></div>
---
> <div><span>function=save</span></div>
>
95d95
<
$
It actually looks like the fault is not in Thymeleaf but the Chrome browser. Does anyone have any idea how to proceed?
I've tried a number of things but as far as I can tell the only difference in the actual HTML is blank lines.
I checked out the page with chrome inspect and it looks like I have a problem with the css path. The relative paths for the static files fails when the url has extra elements in the path. Of course.
So, I've been trying to get to know CSS and HTML a bit better. But whenever I try to set the background-color of a div(class) it just stays white. I hope one of you out there can help me. Thanks (I've tried adding a code snippet, but it wouldnt let me)
.navigator {
background-color: #FF00FF;
background-size: 150%;
}
.pagina {
float: left;
margin-left: 120px;
}
.informatie {
float: left;
}
<div class="navigator">
<div class="pagina">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle=
"dropdown" id="menu1" type="button">Pagina's <span class=
"caret"></span></button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
Pagina 1
</li>
<li role="presentation">
Pagina 2
</li>
<li role="presentation">
Pagina 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
<div class="informatie">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle=
"dropdown" id="menu1" type="button">Informatie <span class=
"caret"></span></button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
informatie 1
</li>
<li role="presentation">
informatie 2
</li>
<li role="presentation">
informatie 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
</div>
The element .navigator has child elements that are floated. When you float elements they are taken out of the normal document flow and do not take up any space. .pagina and .informatie are both floated so .navigator has no height and hence no background color.
Add a clearfix to the parent element with floated child elements.
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.navigator {
background-color: #FF00FF;
background-size: 150%;
}
.pagina {
float: left;
margin-left: 120px;
}
.informatie {
float: left;
}
<div class="navigator cf">
<div class="pagina">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Pagina's <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
Pagina 1
</li>
<li role="presentation">
Pagina 2
</li>
<li role="presentation">
Pagina 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
<div class="informatie">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Informatie <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
informatie 1
</li>
<li role="presentation">
informatie 2
</li>
<li role="presentation">
informatie 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
</div>
use CSS flexBox
.navigator {
background-color: #FF00FF;
display: flex;
align-items: center;
justify-content: center;
}
<div class="navigator">
<div class="pagina">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Pagina's <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
Pagina 1
</li>
<li role="presentation">
Pagina 2
</li>
<li role="presentation">
Pagina 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
<div class="informatie">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Informatie <span class="caret"></span>
</button>
<ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
<li role="presentation">
informatie 1
</li>
<li role="presentation">
informatie 2
</li>
<li role="presentation">
informatie 3
</li>
<li class="divider" role="presentation"></li>
<li role="presentation">
Contact
</li>
</ul>
</div>
</div>
</div>
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>