I am using Bootstrap 4.1.3. I have a navbar which displays a horizontal list of buttons, and when collapsed it displays a vertical list of buttons. In version 4.0.0 alpha6 I was able to have the vertical list displayed as a dropdown instead of a list of buttons. Is there any way I can duplicate the 4.0.0 behaviour in 4.1.3? Sample code attached...
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Display dropdown list instead of buttons when collapsed</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Display dropdown list instead of buttons when collapsed</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSelect" aria-controls="navbarSelect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSelect">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button1" title="button1" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button2" title="button2" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button3" title="button3" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button4" title="button4" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button5" title="button5" value="Button Text">
</li>
</ul>
</div>
</nav>
<section id="no-more-tables">
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Description</th>
<th>Tasks</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Select">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="select[1]" name="select[1]">
<label class="custom-control-label" for="select[1]"> </label>
</div>
</div>
</td>
<td data-title="ID"><p class="form-control-static">ADD1</p></td>
<td data-title="Name"><p class="form-control-static">ADD1 - Insert a single record</p></td>
<td data-title="Tasks" class="right"><p class="form-control-static">193</p></td>
</tr>
<tr>
<td data-title="Select">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="select[2]" name="select[2]">
<label class="custom-control-label" for="select[2]"> </label>
</div>
</div>
</td>
<td data-title="ID"><p class="form-control-static">ADD2</p></td>
<td data-title="Name"><p class="form-control-static">ADD2 - Insert a single record</p></td>
<td data-title="Tasks" class="right"><p class="form-control-static">227</p></td>
</tr>
<tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>
Related
I have the attr data-toggle= dropdown on the {{form.query}} which is the search input
but it just wont show, any solutions?
bootstrap/jquery links in head section :
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
JavaScript in body :
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
HTML code:
<form class="dropdown" method="get">
<input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" required id="id_query">
<ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="menu" id="list" style="display:inline-block;">
<li role="presentation"> Django</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Potato</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Sleep</li>
</ul>
<input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>
Can you please check the below code link? Hope it will work for you. You have to add
id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" in input
and
aria-labelledby="dropdownMenuButton" in dropdown-menu
as per bootstrap documentation
Please refer to this link:
https://jsfiddle.net/yudizsolutions/8fnw0o46/11/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<form class="dropdown" method="get">
<input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" required id="id_query">
<ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="dropdownMenuButton" id="list">
<li role="presentation"> Django</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Potato</li>
<div class="dropdown-divider"></div>
<li role="presentation"> Sleep</li>
</ul>
<input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>
You must use ether a link or a button to toggle the dropdown, not a text input.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu
within .dropdown, or another element that declares position:
relative;. Dropdowns can be triggered from <a> or <button> elements to
better fit your potential needs.
https://getbootstrap.com/docs/4.6/components/dropdowns/#examples
I have the below search navigation bar with links appearing to the right of the search bar. This works fine on PC but is not working on android or Iphone devices.
I have looked at the answer from here and tried using .navbar-header and encapsulating the links within the .collapse class but it didnt work, it just put everything on a new line and the searchbar goes right across the screen and doesnt fit to page -> https://stackoverflow.com/questions/40445515/navbar-not-visible-in-mobile-display/40445579#:~:text=1%20Answer&text=Your%20entire%20navbar%20is%20wrapped,being%20hidden%20in%20mobile%20widths.&text=navbar%2Dheader%20class%20where%20your,and%20logo%20should%20be%20placed.
<th:block sec:authorize="isAuthenticated()">
<form th:action="#{/logout}" method="POST" th:hidden="true" name="logoutForm">
<input type="submit" value="logout">
</form>
</th:block>
<nav class="navbar navbar-expand-sm bg-light">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="searchNavbar">
</div>
<form class="form-inline my-2 my-lg-0" th:action="#{/search}" method="GET">
<input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class"form-control mr-sm-2"
placeholder="What are you looking for " required />
<input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0"/>
</form>
<ul class="navbar-nav">
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="#{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" id="cart-link" th:href="#{/cart}">Cart</a>
</li>
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
</li>
</th:block>
</ul>
</div>
</div>
</nav>
</div>
The toggle suggestion appears to work but the search bar isnt limited to the div and goes all the way across the screen which then becomes scrollable - see the attached photo below:
Is there a way to have the search bar toggable but the links to appear above the search bar without needing to select the navbar-toggle button, only on mobile but on desktop to appear to the side of the Search bar i.e. just below the black line in the above photo and above the "Toggle" button?
Your question isn't really clear as to what your end goal is, but what you're missing is that anything inside .collapse.navbar-collapse is going to be hidden on mobile and you need a toggling mechanism to show it up. I've just added a button with the "Toggle" text and a data-target="#searchNavbar" to make sure your toggling works on mobile.
For obvious reasons, it's not looking very "pretty". But I think you can figure it out by adding proper layouting classes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<th:block sec:authorize="isAuthenticated()">
<form th:action="#{/logout}" method="POST" th:hidden="true" name="logoutForm">
<input type="submit" value="logout">
</form>
</th:block>
<nav class="navbar navbar-expand-sm bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#searchNavbar" aria-controls="searchNavbar" aria-expanded="false" aria-label="Toggle navigation">Toggle
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-header">
<form class="form-inline my-2 my-lg-0" th:action="#{/search}" method="GET">
<input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class "form-control mr-sm-2" placeholder="What are you looking for " required />
<input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0" />
</form>
</div>
<div class="collapse navbar-collapse" id="searchNavbar">
<ul class="navbar-nav">
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="#{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" id="cart-link" th:href="#{/cart}">Cart</a>
</li>
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
</li>
</th:block>
</ul>
</div>
</nav>
I am trying to achieve this
Using the code from bootstrap examples I do it like this
<body>
<!-- create character component -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<!-- creation step component -->
<div class="card">
<!-- header -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Character
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</h5>
</div>
But I simply can't add icon to the header. Whether I use it in or out a tag it simply shows empty header without arrow.
What is the problem?
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- create character component -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<!-- creation step component -->
<div class="card">
<!-- header -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Character
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</h5>
</div>
<!-- configurable items -->
<div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<table>
<tr>
<td>Name</td>
<td>
<input id="playerName">
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<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 role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Age</td>
<td>
<input id="playerAge">
<td>
</tr>
<tr>
<td>Race</td>
<td>
<select id="races">
<option>Human</option>
<option>Elf</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<h3>Character attributes</h3>
<table>
<tr><td colspan="2" align="center">Magical traits</td></tr>
<tr>
<td>Fire affinity</td>
<td><input id="fireAffinity"></td>
</tr>
<tr>
<td>Earth affinity</td>
<td><input id="earthAffinity"></td>
</tr>
<tr>
<td>Water affinity</td>
<td><input id="waterAffinity"></td>
</tr>
<tr>
<td>Wind affinity</td>
<td><input id="windAffinity"></td>
</tr>
<tr>
<td>Lighting affinity</td>
<td><input id="lightingAffinity"></td>
</tr>
<tr><td colspan="2" align="center">Physical traits</td></tr>
<tr>
<td>Power</td>
<td><input id="physicalPower"></td>
</tr>
<tr>
<td>Vitality</td>
<td><input id="physicalVitality"></td>
</tr>
<tr><td colspan="2" align="center">Mental traits</td></tr>
</table>
<h3>Unique traits</h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
I'm kinda new to HTML/CSS, and I'm trying to create a page with a login dropdown, but for some reason there's no padding on the right side of it. How can I fix it?
I wasn't able to find a solution.
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header"><a class="navbar-brand">My Site</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
</div>
<div class="container">
<div class="navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li>Sign Up
</li>
<li class="divider-vertical"></li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 10px;min-width:240px;">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
</div>
or
<form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
<input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
As Bootstrap Documentation says, sometimes you will need to place your dropdown container in a different position, for those cases you need to add the dropdown-menu-right class like so:
<div class="dropdown-menu dropdown-menu-right" style="padding: 10px;min-width:240px;">
Here's a JSFiddle with the example working:
JSFiddle
Your HTML structure should be changed to reflect the base Bootstrap classes. Pull-right isn't respected in the way you're using it, use navbar-right instead. Check the Docs to see the options you have by default.
*Also this class doesn't exist > <span class="glyphicon glyphicon-bar"></span>
See working example Snippet.
.navbar .dropdown-menu-fb {
padding: 10px;
min-width: 240px;
}
.navbar .navbar-toggle {
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <i class="fa fa-bars"></i>
</button>My Site
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up
</li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-fb">
<li class="btn btn-default navbar-btn btn-block"> <i class="fa fa-facebook"></i> Login via Facebook
</li>
<li>
<form action="[YOUR ACTION]" method="post" role="form">
<p class="text-center">or Sign Up</p>
<div class="form-group">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email">
</div>
<div class="form-group">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
<div class="form-group">
<input class="btn btn-primary navbar-btn btn-block" type="submit" name="commit" value="Sign In">
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The container is too big and it go out of the screen?
Work on min-width and let container stay inside the viewport, than focus on padding.
<div class="dropdown-menu" style="padding: 10px;min-width:200px;">
probably you will have to work on dropdown-menu to fix it, we need the css code
I'm trying to do seach box like this:
What's the best way of doing it with bootstrap?.
I was playing with inline form and input group dropdown list, but I have problems with text input width, as it's not fills out whole page width.
http://www.bootply.com/LRUm7PdeMN
How about checking the snippet..
Rest of styling you can do yourself..
.container {
padding-top: 50px;
}
<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">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="search-box">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" aria-label="..." placeholder="Search ...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All categories <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Wszystkie kategorie
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</form>
</div>
</div>
</div>
</div>