I'm using a Bootstrap 4 navbar and added a left-border of a different color for design purposes.
This has the unforunate side-effect of causing the container of the navbar to not be lined up with the container of the main content.
I'm trying to offset the inner container 80px to compensate for the border, but when I try adjusting the position it obviously messes up the rest of the layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar {
border-left: 80px solid red;
}
.navbar .container {
left: 80px; /* something like this */
}
</style>
</head>
<body>
<div class="content-wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand"
href="/">Site</a>
<button class="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#mainMenu"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse"
id="mainMenu">
<div class="form-inline ml-auto">
<label class="sr-only"
for="search-text">Search</label>
<div class="input-group mr-2 mb-2 mb-sm-0">
<input type="text"
class="form-control"
id="search-text"
placeholder="search...">
<div class="input-group-append">
<a href="/search/"
type="button"
id="search-button"
class="btn btn-light">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<a href="/account/login"
class="btn btn-outline-light">log in</a>
<a href="/account/signup"
class="btn btn-info ml-2">sign up</a>
</div>
</div>
</div>
</nav>
<div class="container">
<ol class="breadcrumb my-4">
<li class="breadcrumb-item active">Bread crumbs</li>
</ol>
<h1>and some content</h1>
</div>
</body>
</html>
CodePen
You can add padding-right: 80px; to .navbar to push it back.
Not sure if I understood correctly but you can try:
.navbar {
border-left: 80px solid red;
}
.navbar .container {
left: 80px; /* something like this */
margin-left:0px !important
}
Related
Let's assume we have a main menu and three rows afterwards. The first row should be at the top, the third at the bottom. The second row has to be centered vertically and horizontally.
When you scroll down you should be able to hide the main menu but everything else should fit in the page.
I know this, I know about justify-content-center and I played a bit around with this. But I can't put it together.
The second row is centered vertically but it stretches the height and it's not correctly centered horizontally anymore.
Here is what I tried:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
html, body, {
height: 100%;
}
.header {
float: left;
width: 100%;
}
.full {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="nav">
<div class="container-fluid navbar-main">
<nav class="navbar navbar-expand-md no-padding navbar-main">
<div class="container">
<a class="navbar-brand" href="#">Main menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" role="button">Start</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col header">
<span id="score">first row </span>
</div>
</div>
<div class="row justify-content-center vertical-center" style="height:100%">
<!-- div to center -->
<div class="col-auto">
<span id="operand1">text</span>
</div>
<div class="col-auto">
<span id="operator">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
<div class="col-4">
<span id="operand2">text</span>
</div>
</div>
</div>
</body>
</html>
You should be using the "col-auto" for all the the divs in the 2nd row.
Have a look at this
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
html, body, {
height: 100%;
}
.header {
float: left;
width: 100%;
}
.full {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="nav">
<div class="container-fluid navbar-main">
<nav class="navbar navbar-expand-md no-padding navbar-main">
<div class="container">
<a class="navbar-brand" href="#">Main menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" role="button">Start</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col header">
<span id="score">first row </span>
</div>
</div>
<div class="row justify-content-center vertical-center">
<!-- div to center -->
<div class="col-auto">
<span id="operand1">text</span>
</div>
<div class="col-auto">
<span id="operator">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
<div class="col-auto">
<span id="operand2">text</span>
</div>
</div>
</div>
</body>
</html>
Wrap everything inside that row with a div that has a class called centered. For example, add position relative to the parent row and add css class:
.centered{position:absolute; top:50%; left:50%;}
I tried to center my search field using code below.
But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.
This issue only displays on small screen mode.
Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 100px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
how do i display the image on the .middle div to the full screen, i get a little white space at the end of the image in the right.i am using bootstrap 3 and css and html The image in the middle div is not taking the entire space it happens when i use the row class.I have included the css and html code.
#content{
text-align: center;
padding-top: 25%;
}
.middle {
background-image: url(https://images.unsplash.com/photo-1415369629372-26f2fe60c467);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 700px;
font-family:Lato;
color: white;
}
html{
height: 100%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr{
width: 400px;
border-top:1px solid #f8f8f8;
border-bottom: :1px solid rgba(0,0,0,0.2);
}
a{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Purfect match</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<span class="glyphicon glyphicon-fire"></span> Purfect Match
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Pets For You</li>
<li>Blog</li>
<li>Careers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in <i class="fas fa-user-plus"></i></li>
<li>Log in <i class="fas fa-user"></i></li>
</ul>
</div>
</div>
</nav>
<div class="middle">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Perffect match</h1>
<h3>The Only Human-feline dating app</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The issue doens't come from your background-image, but from your last <div class="row">
You MUST put the bootstrap row inside an element with class container or container-fluid
Try to replace your last block with :
<div class="container">
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
I was trying to use Bootstrap. I have met an issue with the "navbar".
Practically into "navbar-header" there is an image. In the code I have an image element with Bootstrap's navbar-brand class. In the CSS for "navbar-brand" class I entered the background color as white.
The his effect is fine until mouse cursor over to image. If it happens the background color is like transparent. I have verify as well with some tool that part could to change his color, because I think that could be of img:hover or like something, but nothing.
These images should be show my trouble:
Mouse doesn't cover
https://imgur.com/NxwtcHN
Mouse cover
https://imgur.com/VYaa2E0
(The images size larger than support of site).
Edit: I use compile bootstrap version except for jquery which the CDN I have copied it from bootstrap's site.
This is code that I use:
HTML:
<!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="resource/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="StileBootstrap.css"/>
</head>
<body style="background-color:rgb(230, 230, 230);">
<nav class="navbar navbar-default">
<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>
<span style="display:none" class="navbar-toggle" data-toggle="collapse" data-target="#remBar"></span>
<div>
<img class="navbar-brand" src="resource/Logoskillfactory.png"/>
</div>
</div>
<div class="collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contattaci</li>
<li>Chi siamo</li>
<li>Città</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="remBar">
<ul>
<button type="button" class="btn btn-default navbar-btn">Home</button>
<button type="button" class="btn btn-default navbar-btn">Contattaci</button>
<button type="button" class="btn btn-default navbar-btn">Chi siamo</button>
<button type="button" class="btn btn-default navbar-btn">Città</button>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
/* Remove the navbar's default margin-bottom and rounded borders set
background color and set other property*/
.navbar {
margin-bottom: 0;
padding-bottom:0;
border-radius: 0;
background-color:rgb(230, 230, 230);
}
.navbar-brand {
padding:5px 10px 5px 5px;
background-color:white!important;
}
ul {
-webkit-margin-after:0;
margin-bottom:0;
}
#remBar {
background-color:red;
}
I was using Bootstrap to create my first website, however the background image in Jumbotron div does not fill the whole width of the screen leaving a narrow margin on both sides, I have tried changing padding, margins, and change width of the div to 100% but it didn't work.
body {
background-color: #ffe6e6;
}
.navbarheight {
height: 60px;
}
#myname {
margin-left: 0px;
font-size: 45px;
}
.allnavicons {
margin-right: 50px;
}
.navicon {
font-size: 25px;
margin-right: 30px;
}
.jumbotron {
width: 100%;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ-H9Giy0rTSpFwziVBPYtGvAPNcDjSTbQpZDJvVV2vXQ6DClHdOQ")
}
#welcome {
text-align: center;
padding-top: 30px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container-fluid">
<!--Navbar start........................-->
<nav class="navbar navbar-inverse navbar-fixed-top navbarheight">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#" id="myname">Mohamed Hegazy</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav allnavicons">
<li class="active navicon">About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!--Navbar end..........................-->
<!--jumbotron container start..........................-->
<div class="jumbotron">
<div class="container">
<h1 id="welcome">Welcome to my Portfolio!</h1>
<p></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
</p>
</div>
</div>
<!--jumbotron container end..........................-->
</body>
</html>
add this to your CSS code :
.container-fluid{
padding:0;
}