this code shows my attempt at creating a navigation bar but I can find a way to position everything correctly. I have tried using col-md-3 for several elements but yet I am not able to position them. I was wondering if you would be able to put the search bar in the middle with the links aligned to the right.
What I would like to acheive
The Faulty code is below.
Thank you!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>NavBar</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<ul class="navbar-nav ">
<li class="nav-item">
Home
</li>
<li class="nav-item">
<form class="mx-auto order-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1">
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link2
</li>
</form>
</li>
</ul>
</body>
</html>
I would recommend reviewing Bootstrap's excellent documentation on their Navbar component as it will better equip you to truly personalize your Bootstrap layout. It wouldn't hurt to also review their utility documentation as several utility classes are well-suited for achieving your layout.
There are several ways you might go about achieving your desired layout, below is how I would approach it while still keeping the built-in Navbar functionality:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pr-lg-5" href="#">Shopping District 1</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">
<form class="flex-fill my-2 my-lg-0 mx-lg-4">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
</div>
</div>
</form>
<ul class="navbar-nav mr-auto ml-lg-5">
<li class="nav-item">Link</li>
<li class="nav-item">Link2</li>
</ul>
</div>
</nav>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
In the above code sample I've included Bootstrap's class requirements to make your navigational menu collapse on smaller screens, along with the additional components to allow the toggle behavior.
I've also separated the .navbar-brand, form and .navbar-nav items as there is no reason to force them into the same list; Navbar uses Flexbox for its layout so each child element will already align itself accordingly.
For more fine-tuned structure I've declared a couple of margin and padding utility classes (pr-lg-*, mx-lg-* etc) to help create the spacing your illustration suggests you were looking for. By using the -lg- variant these will only apply on larger devices.
So, I was able to modify it to give somewhat of a result similar to what I was looking for!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>NavBar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<ul class="navbar-nav pl-2">
<li class="nav-item">
District 1
</li>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto" width="20"
height="20"></button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</form>
</div>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="" class="nav-link">Link</a>
</li>
<li class="nav-item mr-5">
<a id="two" href="" class="nav-link">Link2</a>
</li>
</li>
</ul>
</body>
</html>
Related
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<style type="text/css" href="style.css"></style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Magic Notes</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3 mx-10" style="max-width:70vw;margin:0 auto;">
<h1>Welcome To Magic Notes</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">Add a Note</h5>
<textarea class="form-control" id="addTxt" style="height: 100px"></textarea>
<button class="btn btn-primary" style="margin-top:1em;"" id= " addBtn">Add Note</button>
</div>
</div>
<hr>
<h1>Your Notes</h1>
<hr>
<div class="container">
<div>HI</div>
<div>HI</div>
<div>HI</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
<!-- <script src="app.js"></script> -->
</body>
In the code below I have used very little CSS just to experiment with some things(I will be adding the CSS file below). However, My target class container is not showing stuff horizontally even after changing it to flex. I have used some bootstrap classes and am very new to this stuff what is the possible reason for this incomprehensible behavior.
The CSS code:
*{
margin:0;
padding: 0;
box-sizing: border-box;}
.container{
display:flex;
flex-direction:row;
flex: 1;}
<style type="text/css" href="style.css"></style>
This is your problem. When connecting your CSS file, you need to use a link tag instead of a style tag. Try this:
<link rel="stylesheet" href="style.css">
So I have the HTML below. If you click on the search (in the top right), you'll see a dropdown box appear in the top left. I want to "connect" these, so that the dropdown box is properly below the search box and the whole thing behaves like how a button connected to a dropdown would.
I'm not really a web guy and I don't really "know" Bootstrap (this is my first time using it) so please bear that in mind!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://use.fontawesome.com/6e0448e881.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" method="get">
<input name="q" id="qbox" data-toggle="dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off"/>
<div id="search_results" class="dropdown-menu" role="menu">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</form>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
You have to override the class applied to the dropdown menu, which is called .dropdown-menu.
In your css:
.dropdown-menu{
left: initial;
}
Depending on how your css structure looks you may call this rule with an !important behind the inital statement.
I'm pretty new Bootstrap 4, so there might be lots of mistakes here.
I want to create a responsive navbar which collapses my 4 menu buttons but still keeping the search bar to its right. I'm not sure yet how to deal with the display of the buttons after expanding, but my goal for now is to keep the search bar to the right with a correct width.
When the screen gets "small", the nav-toggle button shows up, collapsing the menu buttons. That's cool. But the search bar just grows off the container its in. How do I keep it within the container?
I appreciate any suggestions and improvements :)
nav {
background: brown;
}
nav .container {
white-space: nowrap;
}
<head>
<!-- Meta tags -->
<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.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<nav class="navbar sticky-top navbar-inverse navbar-toggleable-sm">
<div class="container" style="width:1400px">
<div class="d-inline-block">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="fa fa-home"> Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-music"> Music</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-info"> About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-address-card"> Contact Us</span>
</a>
</li>
</ul>
</div>
<form class="d-inline-block w-100" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by artist or album name">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</nav>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
EDIT: I tweaked around a little and got the following result -> https://jsfiddle.net/Taliesin84/qL35nejo/
My current objective is to prevent the Search bar from wrapping bellow the collapsed buttons when the size gets too small.
I also need to make the Search Bar wider in larger screen sizes, but that's secondary for now. Any new ideas?
From an example contained in Bootstrap 4's github repo:
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
On my page navbar appears vertically instead of horizontally.
<!DOCTYPE html>
<html lang="en">
<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">
<title>
Home | Bootstrap
</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My bootstrap application</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search" />
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello world!</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
Bootstrap 4
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sample
Why is that? According to the docs it should horizontal by default.
Add navbar-toggleable-md class in nav element to make it looks horizontally in md view :
See this fiddle
Docs :
The original answer applied to Bootstrap 4 alpha. For Bootstrap 4.0+, the navbar-toggleable-* classes have changed to navbar-expand-*. Use one of the navbar-expand-* classes to keep the Navbar horizontal.
<!DOCTYPE html>
<head>
<title>Destiny 2 App</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<style type="text/css">
body {
position: relative;
}
#email {
width: 300px;
}
.jumbotron {
text-align: center;
}
form {
width: 700px;
margin: 0 auto;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Destiny 2 Analyzer</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Destiny 2 Analyzer</h1>
<p class="lead">Delivering news and content about the new Bungie API pre-release Destiny 2</p>
<hr class="my-4">
<p>Sign up below to keep up to date on all news as it breaks!</p>
<form class="form-inline"> //This form is what I want to center
<div class="container"></div>
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
Please look at the form labeled, thanks! I've tried every possible way of centering it, but the elements inside the form never get centered! I appreciate any help. I am trying to finish up this project and this simple form is driving me absolutely insane.
To:
<form class="form-inline">
Add:
<form class="form-inline justify-content-center">
Add the justify-content-center class to your form to fix this issue.