Content going into navbar boostrap - html

I am struggling with my body section. I am trying to add content to the body but for some reason it goes all to my navbar. I tried to add the header section to separate the content and it did but it still appears like it belongs to the navbar. Any suggestions?
<body>
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="index.html">Synergo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Development</li>
<li>Advertising</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<header>
<div class="container centered">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Even more stuff</b><br/> some stuff</h1>
</div>
</div><!--/row-->
<div class="row mt">
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Project Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-chatboxes"></i>
<h3>Account Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-icecream"></i>
<h3>Sales & Lead generation</h3>
</div><!--/col-md-4-->
</div><!--/row-->
</div><!--/container-->
</div><!--H-->
</header>
html, body {
background: url(../img/01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin:0;
background:#eeeeee;
}
header {
text-align: center;
color: #fff;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;

For one you have an extra div. And after that I find everything okay.
Please check the jsFiddle
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav id="tf-menu" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="index.html">Synergo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Development</li>
<li>Advertising</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="container centered">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Even more stuff some stuff</h1>
</div>
</div>
<!--/row-->
<div class="row mt">
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Project Management</h3>
</div>
<!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-chatboxes"></i>
<h3>Account Management</h3>
</div>
<!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-icecream"></i>
<h3>Sales Lead generation</h3>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--/container-->
<!--H-->
</header>
</body>

Not sure what the problem is but the content seems right but the footer is creating problems. Then I get the scrolling. I would like to have the footer attached to the page.
</head>
<body>
<!-- Navigation
==========================================-->
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="index.html">Synergo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Development</li>
<li>Advertising</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Home Page
==========================================-->
<div id="tf-home" class="text-center">
<div class="content">
<h1><strong>Your digital products from inception to go-to market strategy </strong></h1>
<div class="container centered">
<div class="row mt">
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Project Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-chatboxes"></i>
<h3>Account Management</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-icecream"></i>
<h3>Sales & Lead generation</h3>
</div><!--/col-md-4-->
</div><!--/row-->
</div><!--/container-->
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
footer {
background: #fff;
background: rgba(255,255,255,0.9);
}
footer p {
margin: 0;
padding: 50px 0;
}
html, body{
font-family: 'OpenSans', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
background: url(../img/01.jpg) no-repeat center center fixed;
color: #5a5a5a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
font-family: 'Lato', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #5a5a5a;
}

Related

The The content does not appear in the correct position in the Grid system. Bootstrap

I have problem here with the logo and navbar in the design. There are 3 column for the logo and 6 for navbar like this image
But when I running the code They do not appear in the correct position and I do not now where is the mistake in the code. they are come like this in browser:
This is HTML code and css:
body {
font-family: 'Raleway' font-size: 16px;
color: #fff;
font-weight: 400;
letter-spacing: 1px;
background: #003153;
}
header {
background: url(images/home-bg.png) center repeat-y;
min-height: 760px;
width: 100%;
padding: 50px;
}
.navbar {
background: 0;
padding: 0;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700" rel="stylesheet" type="text/css">
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-lg-3 logo"><img src="images/Logo.png" alt="logo"></div>
<div class="col-lg-6 menu">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="mainMenu" 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>
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About me</li>
<li>Courses</li>
<li>Gallery</li>
<li>Articles</li>
<li>Contacts</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-lg-3 search"></div>
</div>
</div>
</header>
Thank you
You have to put =(equals to/ assignment operator) with each class attribute
it should be
<div class="col-lg-3 logo"><img src="images/Logo.png" alt"logo"></div>
<div class="col-lg-6 menu">

Bootstrap website jumbotron image scaling

I'm new to bootstrap and HTML & CSS.
I was trying to use jumbotron on this website I'm trying to create but when I applied the background image I wanted it to fix a size even if the size of the window changed, in fact I wanted to do it on all of the website.
This is how the image is when full sized, and how I want it to be no matter the windows size
This is the image when I reduce the size of the window
And another thing somehow I got a bot and right margin on the website, I wanted to remove it, but I couldn't find from where it was coming .
Here's my HTML:
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<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" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div><!--NavBar END-->
<!--<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<!--<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>-->
</body>
</html>
And CSS:
body {
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
background-color:#898888;
height:500px;
color:white;
}
You can use viewport units to get it.
body {
margin:0;
padding:0;
}
.jumbotron {
align-items: center;
display: flex;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size: cover;
background-color: #898888;
height: 50vh; /* Add this */
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<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" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<!--NavBar END-->
<!--<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<!--<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>-->
</body>
</html>
Samuel, you can use
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
background-position: top; /* position at the top */
background-repeat: no-repeat;
background-color:#898888;
min-height: 20em; /* height in relative units */
color:white;
}

Why am I getting too much pixels for padding using Twitter Bootstrap?

I have made a header prototype using bootstrap. The problem is I couldn't understand why I have such big padding for the right side. If I add one more letter after Корзина HTML gives me a new line. How could I get rid of this free space? Here is the image
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation -->
<!-- Heading beginning -->
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div>
<div class="col-md-8">
<input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm">
<button type="button">Search</button>
<span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span>
<span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span>
</div>
<div class="col-md-8">
<small>Например, лекарства для диабетиков</small>
</div>
</div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- Heading end-->
</body>
You need to increase the col-md-8 to col-md-10 and float the elements to right to remove empty space from right.
here is the updated demo

how can I change the content of a fixed header between sections of a site

I have a site with a single page. The site has seven sections.
The header is fixed, but I would like to change some of its contents in each of the sections .
Any suggestion?
Hugs from Sao Paulo / Brazil
My code
<div class="section"id="home">
<header class="navbar navbar-inverse navbar-fixed-top grid_12 ">
<div class="container col-xs-2 fundo_branco ">
<div class="navbar-header">
<!-- responsive nav button left-->
<button type="button" class="navbar-toggle-left float-left" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<!-- /responsive nav button left-->
</div>
<!-- main nav left -->
<nav class="collapse navbar-collapse navbar-left sobe" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li><img src="assets/img/logo_menu.png" alt=""></li>
<li >HOME</li>
<li>WELCOME</li>
<li>TOP DRINKS</li>
<li>PORTFOLIO</li>
<li>HELP!BLOG</li>
<li>FRANCHISE</li>
<li>CONTATO</li>
</ul>
</nav>
<!-- /main nav left-->
</div>
<div id="header" class="container col-xs-3"> <!-- Sugestion#Snappawapa-->
<h1>Section 1</h1>
</div>
<div class="container col-xs-2 col-md-offset-5">
<div class="navbar-header">
<!-- responsive nav button right -->
<button type="button" class="navbar-toggle float-right" data-toggle="collapse" data-target=".navbar-collapsea">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-square-o fa-2x"></i>
</button>
<!-- /responsive nav button -->
</div>
<!-- main nav right-->
<nav class="collapse navbar-collapsea navbar-left desce" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li>
<a href="#features">
<img src="assets/img/bloco1.png" alt="">
</a>
</li>
</ul>
</nav>
<!-- /main nav right-->
</div>
</header>
</div>
I need in each section change the contents of this div in section #welcome
<div class="container col-xs-3">
<h1>Welcome!</h1>
</div>
Code Section #welcome in this page
<div class="section" id="welcome">
<script>
document.getElementById("header").innerHTML = "<h1>Welcome</h1>";
</script>
This is works, but in the section home changes also.
I want to keep this header for each section. Example:
in section welcome
header=<h1>Welcome</h1>
in section top-drinks
header=<h1>Top drinks</h1>...
JavaScript would probably help you out. Give it an id:
<div id="header" class="container col-xs-3">
<h1>Este conteúdo muda em cada seção!!!!</h1>
</div>
Then you can use some JavaScript to change the contents of it:
document.getElementById("header").innerHTML = "<h1>New Header</h1>";
You could use different events on elements in the page to change it by putting that code in a function:
HTML:
<li >HOME</li>
JavaScript:
function changeHeader(newStuff){
document.getElementById("header").innerHTML = newStuff;
}
Hope this helps

unwanted space between navigation bar and div(red color)

I am getting an unwanted space like this between red color div and header
my html is i've give 0 value for margin and padding for html and body.But still there's a problem please help
<header>
<nav role="navigation" class="navbar navbar-fixed navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Example
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-ul">
<li id="tech" class="nav-list"> home</li>
<li id="politics" class="nav-list"> careers</li>
<li id="crime" class="nav-list"> about</li>
<li id="business" class="nav-list"> contact</li>
</ul>
</div>
</nav>
</header>
<section class="frontpage">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
<section class="ghi">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
and css is i've also tried giving 0 padding and margins for div and header
body,html {
margin:0;
padding:0;
}
header{
margin:0;
padding:0;
}
.frontpage{
background:red;
height:200px;
margin:0;
padding:0;
}
.ghi{
background:blue;
height:220px;
}
use it
.navbar{
margin-bottom: 0!important;
}
body,html {}
header{}
.frontpage{
background:red;
height:200px;
}
.ghi{
background:blue;
height:220px;
}
.navbar{
margin-bottom: 0!important;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<header>
<nav role="navigation" class="navbar navbar-fixed navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Example
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-ul">
<li id="tech" class="nav-list"> home</li>
<li id="politics" class="nav-list"> careers</li>
<li id="crime" class="nav-list"> about</li>
<li id="business" class="nav-list"> contact</li>
</ul>
</div>
</nav>
</header>
<section class="frontpage">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
<section class="ghi">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
It is because the Browser is adding default margins to the ul Elements. Add this style to your css and it should fix the issue:
ul.nav { margin-bottom: 0 !important; }
Just in case someone else have same problem. I fixed it based on reading https://css-tricks.com/fighting-the-space-between-inline-block-elements/ in my case just added this line margin-bottom: -10px;