Bootstrap navbar items alignment - html

I am trying to build a very simple navbar with bootstap according to some online tutorials.
I am trying to align the navbar items horizontally but I keep getting the following formation:
My code is the following:
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>
</body>

you need to just add navbar-nav to your ul
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>

Try This
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h1> Hello World! </h1>
</div>
</body>
</html>

Related

Is it possible to reposition the Cognigy WebChat toggle button in an <li> tag?

I have the following test code, but no matter what I do the toggle button always positions itself to the bottom right of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TestWebsite</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>
<script src="https://github.com/Cognigy/WebchatWidget/releases/latest/download/webchat.js"></script>
<script>
initWebchat(
"https://endpoint-trial.cognigy.ai/1344d45dff864bfb0627d205f7f8835026ab24d0d27384ffabd4740a9c1023b2"
)
</script>
</li>
</ul>
</div>
</nav>
</body>
</html>
I need it to be positioned in an <li> after <li>Page 3</li>

Struggling to position Boostrap with my own CSS

When trying to position my search bar at equal y level to the "Art Store" text, it does not do this.
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
That is my text for the art store and then the search bar. My search bar looks like this with none of my own CSS:
When I add my own CSS, it looks like this
.searchBar {
width: 250px;
padding: 10px;
margin-right: 50px;
}
I want to position my search bar on the right side positioned at an equal y level to the Art Store text. When I use float: right, it positions the search bar down into the bottom navbar...?
This is not what I want to happen. I'm unsure why this is happening as it happens even when I set the position to relative. Any help would be greatly appreciated. Below is a little bit more code if that helps. (includes the bottom navbar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>
I'am added a code into your case
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%
display:inline-block;
margin-left:auto;
}
I'm used margin-top:0px for remove margin from bootstrap into #logoRow
So will get output like this
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%;
display:inline-block;
margin-left:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow">
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>
This should work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
<style>
.searchBar {
width: 250px;
padding: 10px;
margin-left: auto;
}
</style>
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</nav>
</div>
</header>
</body>
</html>
Hey if i understand correctly you can use display flex to get your desired results. See the below css for how I solved it. click here for a screenshot
#logoRow{
display: flex;
align-items: center;
}
#logoRow h1{
margin: 2rem;
}
This can help:
.searchBar {
position:absolute;
float:right;
width: 250px;
padding: 10px;
margin-right: 50px;
}

Why the button is located on the left and not under the picture?

Why the button is located on the left and not under the picture?
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/Content/My.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="~/Images/FirstImage.jpg" class="img" />
<button type="button" class="btn btn-default">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Image is an inline element such as span, not block element such as div, so next element is following the image on the same line.
To make it block element you can put the image inside the div:
<div><img ...></div>
or use style to make it block element
<img style="display: block;" >
or using the css annotation:
.img { display: block; }
Because neither image or button are block elements. This doesn't have anything to do with bootstrap.
img {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/Content/My.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://placebear.com/100/100" class="img" />
<button type="button" class="btn btn-default">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to set this CSS rule:
.panel-body { display: grid; }
Or this one:
.img { display: block; }
And here is the jsfiddle

Bootstrap 3 navbar dropdown menu full height

i have a classic Bootstrap 3 navbar with a dropdown menu (https://getbootstrap.com/examples/navbar/).
I would like the menu dropdown to have the screen height. it's possible ?
Just giving height attribute for this sample may help for this. In-line style css applied for drop-down item.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" style="height:100vh;">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the
navigation bar.</p>
</div>
</body>
</html>
I use this script to get the solution.
$(document).on("shown.bs.dropdown", ".dropdown", function () {
$(this).children(".dropdown-menu").css("height",screen.height);
})
It's possible to do in CSS?

bootstrap navbar collapse won't work

I am making a portfolio site on codepen.io and my navbar collapse button won't work went the window size is decreased. Codepen: https://codepen.io/RayFitzgerald/full/vKgYoj/ Apologies for poorly written code. I am new.
HTML
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Ray Fitzgerald
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfollio</li>
<li>Social</li>
</ul>
</div>
</div>
</nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
<div class="intro-text" id="About">
My name is Ray Fitzgerald and I am a young Programmer and Web Developer
</div>
<div class="intro-text" id="Portfolio">
Portfolio
</div>
<div class="intro-text" id="Social">
Social
</div>
</div>
</div>
</body>
CSS
body{
padding-top: 50px;
}
.intro-text{
font-size: 30px;
}
#About{
height: 500px;
}
#Portfolio{
height: 500px;
}
#Social{
height: 500px;
}
No bootstrap.min.js and no JQuery library found in the link provided by you.
Add JQuery library then add bootstrap.min.js it will work.
Bootstrap navbar toggle component works only when Bootstrap Javascript is included in the code. Include bootstrap javascript file and it works like charm.
Reminder: Bootstrap JS works only if you include jQuery first.
Try this code as it is in application this code works me at my end
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sitename</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page sub</li>
<li>Page sub</li>
<li>Page sub</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>