<!DOCTYPE html>
<html>
<head>
<title>Welcome to my garage</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<body>
<div class="navbar navbar-inverse" >
<div class="container">
<a href="#" class="navbar-brand" >MyGarage</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse" >
Rooms
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" >
<ul class="nav navbar-nav navbar-right">
<li>Garage</li>
<li>Toilet</li>
</ul>
</div>
</div>
</div>
<h1> List of posts (yet ;) ) </h1>
<br /><br /><br /><br />
Add Post
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</head>
</html>
Can someone explain why the tag was not rendered in firefox? I'm playing with twitter bootstrap.
What I wanted was to have a drop-down button called "Rooms" in the nav-bar which drops down "Garage" and "Toilet"
Thankyou
replace this markup
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my garage</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div class="navbar navbar-inverse" >
<div class="container">
<a href="#" class="navbar-brand" >MyGarage</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse" >
Rooms
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" >
<ul class="nav navbar-nav navbar-right">
<li>Garage</li>
<li>Toilet</li>
</ul>
</div>
</div>
</div>
<h1> List of posts (yet ;) ) </h1>
<br /><br /><br /><br />
Add Post
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Related
I am making a forum and faced with the problem that the top navigation bar overlaps the text on all pages of the site. Am I missing something?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Forum</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand navLogo" asp-controller="Home" asp-action="Index"></a>
</div>
<div class="navbar-collapse collapse">
//Panel code
</div>
</div>
</nav>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
All the code work so far but whenever i try and input bootstrap elements after the header its not displaying properly? Anyone know what going on here? Not sure why because the code all works so far? Anything after the header-main div is not displaying correctly!
<!DOCTYPE html>
<html>
<head>
<title>The Beckwood - Scunthorpe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=satisfy"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy"
rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="header-main">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#" >
<img src="assets/img/logo.png">
</a>
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BOOK A TABLE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="hero">
<h1 id="welcome">Welcome to The Beckwood.</h1>
<p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
<div class="btn btn-primary">View Menu</div>
<div class="btn btn-primary">Book a table</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to hide the contents' titles inside navbar (because they're already showed in the page's body) and they can only be showed in the collapse button when scale down the screen. In other words, except the brand, there'll be no content in the navbar, and the content can only be showed in the navbar when scale down the screen and open the collapse button. I don't know any class that can hide contents. I tried to use hidden-... but it didn't work. Could you suggest me some ways?
Here are my codes:
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<title>Module 3 Assignment</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-brand">
<h1>Food, LLC</h1>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="collapse-nav" class="collapse navbar-collapse">
<ul id="#nav-list" class="nav navbar-nav">
<li class="hidden-md hidden-sm">
<br class="hidden-xs"/>Chicken
</li>
<li class="hidden-md hidden-sm">
<br class="hidden-xs"/>Beef
</li>
<li class="hidden-md hidden-sm">
<br class="hidden-xs" />Sushi
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hello I was recently hired by a kid at my school to make a website for him. I'm new to bootstrap and I'm not very good, but I thought i was getting the hang of it when my navbar button(right, top when collapsed.) wouldn't work. Please help.
here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="jack.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar navbar-static-top" id="my-navbar">
<div class="container">
<div class="navbar-header"></div>
<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" id="orange" href="">JackMagic7</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Blog</li>
<li>Magic</li>
<li>Home</li>
<li>Pics</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
You forgot to close the nav Tag, here is the correct code, I also fixed some small failures
I would recomend you an Editor/IDE, which supports syntax hihlighting, to prevent such Failures, another cool tool for debugging is the Extension "Firebug" for Firefox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="jack.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar navbar-static-top" id="my-navbar">
<div class="container">
<div class="navbar-header"></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" target="#navbar-collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="orange" href="">JackMagic7</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Blog</li>
<li>Magic</li>
<li>Home</li>
<li>Pics</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
html, body {
margin:0;
padding:0;
}
.nav {
margin:0px;
}
.navbar{
margin-bottom:0px;
}
.header{
margin:0px;
padding:0px;
display:block;
vertical-align:middle;
width:100%;
}
<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css.css" rel="stylesheet" type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body >
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-scroll">Website</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right" id="#myNavbar">
<li class="hidden"></li>
<li class="page-scroll">Home</li>
<li class="page-scroll">About</li>
<li class="page-scroll">Services</li>
<li class="page-scroll">Contact</li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Header-->
<header >
<div class="container" >
<div class="row">
<img src="work.jpg" class="img-responsive" >
</div>
</div>
</header>
<!--Header-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
I'm coding my first website there's some unwanted white space around the header image that won't go away.
I've checked all the usual solutions like setting margin and padding:0;display: block and width:100% but they don't seem to be working.
Could somebody please take a look at the code and let me know what I'm doing wrong?
Replace the
<div class="container"> to <div class="container-fluid">
and give your image
width= 100%.
Something like:
<style>
.width_full {
width: 100%;
}
</style>
<div class="container-fluid">
<div class="row">
<img src="work.jpg" class="img-responsive width_full">
</div>
</div>