I am newbie to bootstrap, trying to get a make a template.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Tech Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Top image is what i wanted, but, what i am getting is the below output,
As one can see in the image, the links are in the same line as the brand name, which i do not want, it should be in the next line.
Style like this.
<ul class="nav navbar-nav">
to
display:block;
Related
I am designing a responsive page with Bootstrap 5, but I am having problems with Navbar in the first place. The toggle button does not work at all, no items shown when clicks.
I had searched for official documents for solutions, but not helpful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container bg-dark">
<nav class="navbar navbar-expand-sm">
Brand
<button
class="navbar-toggler"
type = "button"
data-bs-toggle="collapse"
data-bs-target="#menuItems"
aria-controls="menuItems"
aria-expanded="false"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
About
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
You missed up using id menuItems also you must using navbar-dark with bg-dark
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container bg-dark">
<nav class="navbar navbar-dark navbar-expand-sm">
Brand
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to set up a local Laravel website to learn the new features and differences in Laravel 5.6. However, when trying to place a Font Awesome icon in the navbar-brand in Bootstrap 4 it won't seem to load. When I check out the element in the inspector in Chrome the elements dimensions are 0x0. I tried adding width and height of 90px just to see the icon but it still won't show. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="{{ route('/') }}" class="navbar-brand">
<i class="fa fa-laptop-code"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsedContent">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
fa-laptop-code is not available in the version of font-awesome you are loading.
You are loading 4.7, but if you want to use that icon you need to load FontAwesome 5
Use this CDN instead: https://use.fontawesome.com/releases/v5.2.0/css/all.css
Try this, it will work
<i class="fa fa-laptop"></i>
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="{{ route('/') }}" class="navbar-brand">
<i class="fa fa-laptop"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsedContent">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Normally when a Bootstrap navbar collapses the resulting menu is the full width of the screen. Is there any way to make it only as wide as the content and to the right of the screen?
It can be done in the following way--
working example
#media(max-width:767px){
.navbar-inverse {
width:50%;
margin-left: 50%;
}
}
<html>
<head>
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="nav-container">
<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="#">header</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
Sign Up
<!--Studier demo</button>-->
log-in</button>
<!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>-->
another</button>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have read other SO questions about this but cannot find an answer to fix the problem. I have checked my code multiple times but couldn't find an error. I am new to using bootstrap, so I could be missing something obvious.
<!DOCTYPE html>
<html>
<head>
<title>asdf</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content"asdf" >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="/stylesheets/style.css" media="screen">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-muted" href="#">ASDF</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
</div>
</div>
<!-- End Navbar -->
</body>
<script></script>
<!-- ******************************* -->
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</html>
Change order of scripts:
JsFiddle
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
then
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I'm having trouble with multiple bootstrap in Twitter Bootstrap 3.
First Navbar is working ok with resizing and responsive.
Second navbar doesn't work properly in normal resolution, but when i try to do size to responsive and after resize it's working okay.
Here's some code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-static-top hr" style="background:black;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item2</li>
<li class="divider-vertical"></li>
<li>Item3</li>
<li class="divider-vertical"></li>
<li>Item4</li>
<li class="divider-vertical"></li>
<li>Item</li>
<li class="divider-vertical"></li>
<li>Item6</li>
<li class="divider-vertical"></li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hr" style="background:#ececec; border-top:none; ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse2 collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li>it1d</li>
<li class="divider-vertical"></li>
<li>it2d</li>
<li class="divider-vertical"></li>
<li>it3d</li>
<li class="divider-vertical"></li>
<li>it4d</li>
<li class="divider-vertical"></li>
<li>it5d</li>
<li class="divider-vertical"></li>
<li>it6d</li>
<li class="divider-vertical"></li>
<li>it7d</li>
</ul>
</div>
</div>
</div>
<!-- FOOTER -->
And Bootply:
http://bootply.com/101032
Best Regards and thanks for help.
Edit:
Ok I have resolution.
If you have same problem you have to change data target for second navbar and in starting div add ( i changed for .main-nav)
and after add your data-target class on the end of navbar item.
<div class="collapse navbar-collapse main-nav">
Here's link to bootply how to do it proper
http://bootply.com/101069
try changing
<div class="navbar-collapse2 collapse">
to that
<div class="navbar-collapse collapse">
If you add the following bit of CSS (either in a style tag or a custom css file), it should fix your problem.
#media only screen and (min-width: 768px) {
.navbar-collapse2.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0px;
overflow: visible !important;
}
}
I pulled this code from the code in bootstrap.css for .navbar-collapse