New to bootstrap, I'm using Bootstrap 4 alpha 6 and I'm struggling to set up a simple navbar. I want the brad on the left and a simple button on the right. I've looked at the documentation and can't seem to solve my issue. I know it has something to do with mr-auto or something similar. I've tried float-right, but that doesn't work. My button just sits below the brand on the left. here's my code....
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<div class="mr-auto">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</nav>
Any help is greatly appreciated
Try using helper classes from bootstrap.
Documentation: Bootstrap Responsive floats
<nav class="navbar navbar-light bg-faded">
<div class="col-sm-12">
<div class="float-left">
<a class="navbar-brand" href="#">My Brand</a>
</div>
<div class="float-right">
<div class="mr-auto">
<button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button>
</div>
</div>
</div>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-light bg-faded">
<div class="col-sm-12">
<div class="float-left">
<a class="navbar-brand" href="#">My Brand</a>
</div>
<div class="float-right">
<div class="mr-auto">
<button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button>
</div>
</div>
</div>
</nav>
If you had shared the css along with html it would have been helpful. "navbar-right" class will float the element only above 768px width. If you want it to float right for all the screen sizes then use styling of float:right.
.mr-auto{
float:right;
}
I have attached the working example of it http://jsfiddle.net/b1xpte8q/
This question is basically a dup of: Bootstrap 4 align navbar item to the right
The separate issue of making it not collapse, is a matter of using navbar-toggle-xl which prevents the mobile collapsed navbar...
<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
<a class="navbar-brand mr-auto" href="#">My Brand</a>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</nav>
https://www.bootply.com/CTXFJPFIK4
Related
Hello im trying to put my content area to the right of my vertical nav bar using bootstrap 4. in my current code the content area is under the menu. any suggestions on how to fix it so its next to the menu on the right side.
Thank you
<div class="container-fluid">
<div class="col-3">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
<ul class="navbar.flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Index</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="col-9">
<p>Main Content area</p>
</div>
</div>
Copy the col-9 div and place it after the col-3 div ends. Add d-flex flex-row classes with container-fluid class.
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
I am using bootstrap to make my navbar right now and the only things I want in my navbar are 3 buttons that when clicked link to other pages. As of right now I have it looking like this:
https://i.stack.imgur.com/31s1f.jpg
As you can see those buttons are all just the size of the text that's in them.
The code is pretty simple for them right now too:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-left">
<button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
</ul>
<ul class="text-center">
<button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
</ul>
<ul class="nav navbar-right">
<button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
</ul>
</div>
</nav>
How can I make the buttons take up the entire navbar? or is there a better way I should be going about this?
Welcome to the community.
flex-grow-1 takes as much space as available.
There are a couple of ways to do so. But I think it is best to use the flex-grow-1 class on the buttons.
It is bugs free, and when there is not enough place for the three on the same line, the line breaks, and they each occupy all the available space.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<button class="btn btn-default flex-grow-1" id="settings" name="settings">SETTINGS</button>
<button class="btn btn-default flex-grow-1" id="settings" name="settings">CREATE A NEW POST</button>
<button class="btn btn-default flex-grow-1" id="settings" name="settings">MY PROFILE</button>
</nav>
https://codepen.io/anon/pen/YOaXwb
Now, since there are three elements with the flex-grow-1 class, their parent's width is divided proportionately between them.
You may use mb-* or my-* class on the buttons to add some margin. If the line breaks, it is good to have same space below the buttons.
https://codepen.io/anon/pen/vzRNWm
If you want that each of the buttons takes 100% width of the nav, use d-block on the nav and w-100 on the buttons.
navbar is flex by default. d-block makes it block
w-100 sets width of buttons to 100%
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-block ">
<button class="btn btn-default w-100 m-1" id="settings" name="settings">SETTINGS</button>
<button class="btn btn-default w-100 m-1" id="settings" name="settings">CREATE A NEW POST</button>
<button class="btn btn-default w-100 m-1" id="settings" name="settings">MY PROFILE</button>
</nav>
https://codepen.io/anon/pen/eLMpJX
You need to use the li element inside the ul element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-dark">
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
</li>
</ul>
</nav>
Been trying to learn Web Development and am currently messing around with BootStrap 4.0. I have a search field to the right of the navbar which is inline until the dimensions change to that of a phone and my nav links collapse. In the new format my search field and button are no longer inline. To be clear at tablet dimensions it works fine just not at what I would consider phone size. Any Help would be greatly appreciated.
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<!-- Brand and Name -->
<a href="#" class="navbar-brand">
<img src="https://logoobject.com/wp-content/uploads/edd/2018/02/Free-Coffee-Logo-1-820x820.png" width = "30" height="30" class="d-inline-block align-top" alt="">
Koffee
</a>
<!-- For hamburger menu -->
<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>
<!-- Collapsable nav -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left hand side content use margin-right (mr) -->
<ul class="navbar-nav mr-auto">
<!-- Active Link -->
<li class="nav-item">About Us</li>
<!-- Dropdown Menu -->
<li class="nav-item dropdown">
Features
<div class="dropdown-menu" aria-labelledby = "navbarDropdown">
Cultural
The best Cocoa
For the workers
<!-- Just a line :) -->
<div class="dropdown-divider"></div>
Pricing
</div>
</li>
<!-- Disabled link -->
<li class="nav-item">Reviews</li>
</ul>
<!-- Right Hand side content use margin-left (ml) -->
<ul class="navbar-nav ml-auto">
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
</div>
</div>
</nav>
DEMO
Use d-flex instead of form-inline for the search form...
https://jsfiddle.net/ahotm7uv/
<ul class="navbar-nav ml-auto">
<form class="d-flex">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
These are parts of styles that are applied to your .form-control class:
.form-control {
width: 100%;
}
#media (min-width: 576px)
.form-inline .form-control {
width: auto;
}
By default it has width: 100% which is not what you want. But when the screen size is getting bigger than 576px width: auto overlaps it. So changing the default width: 100% to width: auto should do the trick.
I have been trying to create a bootstrap footer using the class navbar-fixed-bottom, however I do not want this to be a fixed element and I want to have to scroll to it.
This is my existing code
Any help?
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left"><strong>Click08.co.uk</strong> is a <strong>Web Daddy</strong> project.</p>
<a class="navbar-btn btn btn-success pull-right" href="../Home.php">Return To Home</a>
</div>
</div>