Just downloaded the Bootstrap 4 Dashboard template and are trying to add a form to the top search bar. When I do this the search bar shrinks and loses it's design.
Bootstrap 4 Dashboard template
It's probably down to html/CSS by I can't figure out how to accomplish this without breaking up the design, not that familiar with the new and added CSS in Bootstrap 4.
Tried this, but like I said, the form shrinks to the center:
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
<form action="search.php" method="POST">
<input class="form-control form-control-dark w-100" type="text" placeholder="Search">
</form>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="logout.php">Log out</a>
</li>
</ul>
</nav>
Just move the w-100 from the input to the form.
<form action="search.php" method="POST" class="w-100">
<input class="form-control form-control-dark" type="text" placeholder="Search">
</form>
Demo
This will make the form width:100%.
The input tag has width:100% which is a relative value. Now that you have added form tag as the parent of the input, it must have a width of 100% too.
Try replacing the code with this for testing (given inline css for now):
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
<form action="search.php" method="POST" style="width: 100%">
<input class="form-control form-control-dark w-100" type="text" placeholder="Search">
</form>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="logout.php">Log out</a>
</li>
</ul>
</nav>
Related
I have two divs that represent a list of elements the user can click on on a search bar, followed by a "Done" button.
<div class="dropdown col" id="dropdown-search-id">
<input type="text" class="form-control dropdown-toggle" id="inputSearch" placeholder="Search for a term ">
<div class="col dropdown-menu" aria-labelledby="inputSearch">
<div id="search_list_container">
<ul id="inputSearchEntries">
<li id="searching_li" style="visibility:hidden">
<img src="{{static_dir}}/loader.gif" alt="Loading" style="width:15%"/>
</li>
</ul>
</div>
<div id="doneSearchButton" class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</div>
</div>
Whenever the user starts typing, there are a number of <li> elements that appear with an autocomplete function (that is, they are appended between the <ul> tag, but the position of the "Done" button is messed up, as it does not stay at the bottom, that is, below the list elements.
How can I keep the button always at the bottom of the list, regardless of how many elements there are?
See example below. I used your code, added a few <li> items, the data-bs-toggle and a class on the <ul> list so no bullets appear, and the buttons is where it should be.
So if your problem isn't solved with my example, post the full example of the dropdown, with the search results and including any custom CSS.
Other options:
Use the helper class float-end instead of using flex.
Place the btn inside the list: <ul><li>..</li><li><btn></li></ul>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown col" id="dropdown-search-id">
<input type="text" class="form-control dropdown-toggle" id="inputSesarch" data-bs-toggle="dropdown" aria-expanded="false" placeholder="Search for a term ">
<div class="col dropdown-menu form-control" aria-labelledby="inputSearch">
<div id="search_list_container">
<ul class="list-group" id="inputSearchEntries">
<li><a class="dropdown-item" href="#">First result</a></li>
<li><a class="dropdown-item" href="#">Another result</a></li>
<li><a class="dropdown-item" href="#">Some other result</a></li>
</ul>
</div>
<div id="doneSearchButton" class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</div>
</div>
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'm building a little website (link) which displays a search bar in the navigation bar. I'm using Bootstrap 4 for the navigation bar controls, and Algolia Places for the search bar HTML input element. The problem is that I cannot align the search bar with the search button, even though I'm using form-inline. Also, the search results displayed when typing something in the search bar get cut off.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
Drinking Fountains
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Map
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="mr-sm-2" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#navbarMenu .form-inline {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
... should do the trick.
or, using Bootstrap flex utility classes:
<form class="d-flex align-items-center flex-nowrap">
But, to also resolve the border-radius issue, you might want to change your markup to:
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-light" type="submit">Search</button>
</div>
</div>
</form>
Make sure the <button> is display:inline-block. And your input has max-width:100% instead of width:100%.
Also your .ap-dropdown-menu isn't Z-indexed properly above the map.
using Bootstrap:
wrap your <span> where search is and button with <div class="d-flex"></div>, and add to <span> class mr-2 for space you want.
Should be something like this:
<div class="d-flex">
<span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</div>
and
result
After changing the size of my button with btn-sm, it has got misaligned with respect to the rest of the social icon buttons on my navbar. How would I recenter it?
I'm also using Angular 8 to manage the backend of my website (maybe that changes something in this case?); and my top navbar is of class navbar navbar-expand navbar-light bg-light flex-column flex-md-row.
<nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
{{ title }}
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link p-2">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-md-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
<div class="col-md">
<div ngbDropdown class="d-flex">
<button
class="btn btn-outline-secondary btn-sm"
id="dropdownBasic1"
ngbDropdownToggle>
{{ upperCaseFirstLetter(langNavbar) }}
</button>
<div
ngbDropdownMenu
aria-labelledby="dropdownBasic1">
<a
ngbDropdownItem
class="langToggle"
*ngFor="let language of languages"
(click)="onChangeLanguage(language)">
{{ upperCaseFirstLetter(language) }}
</a>
</div>
</div>
</div>
</ul>
</nav>
I couldn't really solve the problem, but one way to adjust the positioning of this button would be by adding more margin or padding to it. For example, mt will add margin to the top of the button, hopefully you will hit a big enough margin. In my case, I ended up using:
<a class="btn btn-outline-secondary btn-sm d-inline-block ml-2 mt-1 mr-3">
...
The number for each margin and padding is a multiplier for the $spacer variable found in node_modules/bootstrap/scss/_variables.scss. The $spacer variable has a 1rem measurement by default.
CSS
.main{
border-radius: 20px;
margin-left: 20px;
margin-right: 20px
}
.left{
max-width: 250px;
height: 1%;
border-radius: 20px;
}
.right{
max-width: 250px;
height: 1%;
border-radius: 20px;
}
.parent-container {
display: flex;
}
HTML
<div class="parent-container">
<div class="container left">
<div class="row">
Left content
</div>
</div>
<div class="container card main py-3">
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-lg-12 text-center">
<h2>TITLE2</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<a href="#" class="link1">
<img src="2.jpg">
<h3>Title3</h3>
</a>
</div>
</div>
</div>
</div>
<div class="container right">
<div class="row">
<div class="right-content">
Right content here
</div>
</div>
</div>
</div>
On full width my page layout looks like this:
[navbar]
[1][2][3]
I was told in my previous post to use the "order-last order-md-first" but that doesn't really help me because when I resize the window I get something like this:
[navbar]
[2][3][1]
And the effect I'm looking for is:
[navbar]
[2][3]
....[1]
(the [1] div just under the [3])
Is it in any way achievable? Thanks in advance.
To achieve the effect you are looking for, you need besides the order classes also the offset classes.
But first the columns:
col-lg-3 -- col-lg-6 -- col-lg-3 in the code below means that the sidebar columns take up 3 units on larger screens and the center column 6 units (12 in total).
On smaller screens (smaller than lg), the center column gets 8 units (col-8) and the right column gets 4 units (col-4), adding up to a total of 12 once again.
That's why the left column must also have col-4 and needs an offset of 8 units on smaller screens in order to position it directly underneath the right column on smaller screens.
That's why we need the following set of order and offset classes for the left column:
order-last order-lg-first offset-8 offset-lg-0
order-last is the default order for the left column i.e. that's the order for the smallest screens (Bootstrap 4 is "mobile-first", so the smallest screens come first)
order-lg-first says: "From large (lg) screens and up you come first."
offset-8 determines the default offset i.e. for the smallest screens
offset-lg-0 means that from the large (lg) screen size and up there shall be no offset (zero offset).
Here's the working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0 bg-warning">
<h2>1</h2>
Left content <br>
Left content <br>
Left content <br>
</div>
<div class="col-8 col-lg-6 bg-primary">
<h2>2</h2>
Center <br>
Center <br>
Center <br>
</div>
<div class="col-4 col-lg-3 bg-secondary">
<h2>3</h2>
Right content <br>
Right content <br>
Right content <br>
</div>
</div>
</div>