I am having trouble to align my image to the navbar correctly its slightly to the side. I am trying to set it out so that it fits with the navbar together in the white area.
So when you click on the image the navbar pops up below it.
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.logo {
width: 100px;
height: 50px;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
/*deviders*/
.home{
height: 100%;
padding-top: 150px;
text-align: center;
background: #423840;
}
.about {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body class="scroll-area" data-spy="scroll" data-offset="0">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div>
<section id="home" class="home">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact us</h1>
</div>
</div>
</div>
</section>
</body>
You need to make little change in your css, Just replace the below css code. I hope it work for you.
.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}
Related
This question already has answers here:
How can I center an image in Bootstrap?
(4 answers)
Closed 4 years ago.
I'm working on a random quote web app and I can't center the image horizontally. Usually, this is acquired using mx-auto. My image is inside a div with size col-12, and the div is inside a row. However, image still not centering. If anyone can point out what am I missing? thanks
link http://pctechtips.org/apps/quotes/
code
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
css
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
Add classes d-flex align-items-center to the col-12 div containing the image
Add d-block class to img that make your image center.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image d-block">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
or add text-center to it parent.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12 text-center">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
I have the following HTML with navbar, 3 column body and a large footer bar. I have included a button on the navbar clicking which a modal should pop up. I have used the basic example given in the WS schools as a demo one. The WSS demo works flawlessly when I run it as a standalone page. However, when I include the same example in my html, the modal is not popping up. I have included the script in JSFiddle too https://jsfiddle.net/3Lonzx1f/2/.
I am including the same below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- View meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DEMO
</title>
<!-- Color CSS Styles -->
<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://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<script src="https://use.fontawesome.com/f87c84f770.js"></script>
<script src="jtree.js"></script>
<style type="text/css">
body, html, .sidebar, .body .rhsbar{
height: 100%;
min-height: 100%;
}
html, body {overflow:auto}
body { padding-bottom: 200px; }
#container{
width:100%;
height:100%;
/* position:absolute; */
}
.sidebar{
width:25%;
float:left;
height:100%;
border-right: solid 6px #f1ded9;
overflow-y: auto;
}
.body{
background-color: white;
float:left;
width:50%;
height:100%;
}
.rhsbar1{
background-color: white;
float:right;
width:25%;
height:10%;
border-left: solid 6px #f1ded9;
overflow-y: auto;
}
.rhsbar2{
background-color: white;
float:right;
width:25%;
height:90%;
border-left: solid 6px #f1ded9;
border-top: solid 6px #f1ded9;
}
.rhsbar2 .xmldirectories{
margin-top: 50px;
padding:2px;
}
.navbar {
height: 20px;
position: absolute;
background-color: black;
width:100%;
border-bottom: solid 6px #f1ded9;
z-index:999;
}
#loaded_img_panel {
display:block;
height: 200px;
position: relative;
background-color: white;
overflow: auto;
white-space: nowrap;
border-top: solid 6px #f1ded9;
}
</style>
</head>
<body>
<div class="navbar">
<div class="col-sm-1" style="padding:10px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-3" style="padding:5px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-2" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:10px;color:white;">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
<div class="col-sm-1" style="padding: 5px 0px 0px 0px;color:white;">
</div>
<div class="col-sm-1" style="padding:10px;text-align:right;color:white;text-decoration:none;">
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Php code to list all the match sub folders -->
<div id="container">
<div class="sidebar">
</div>
<div class="body">
</div>
<div class="rhsbar1">
</div>
<div class="rhsbar2">
</div>
</div>
<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >
</div>
</body>
</html>
Can someone help please?
This is because you are missing the bootstrap3 javascript library. Just add this library below your jQuery script tag
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Updated Fiddle
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
I'm making a web with bootstrap and I need to create an specific header but I have problems.
The image below is what I have to do:
and the image below here is what I have made:
The code I'm using is:
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
}
#profile {
border-radius: 100%;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav navbar-left top-nav">
<img id="profile" width="50px" src="assets/images/nobody.jpg">
<p>Nombre y apellido usuario</p>
</div>
<div class="navbar-header">
<img src="assets/images/logo.jpe">
</div>
<ul class="nav navbar-right top-nav">
<li>Logout<i class="mdi mdi-logout"></i></li>
</ul>
</nav>
</div>
Here is an option using basic Bootstrap concepts. Hope it helps.
<!--Container-->
<div class="container-fluid">
<!--Row-->
<div class="row">
<!--Col-MD-12-->
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<!--Left Nav Div-->
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li>
<span><img class="img-circle" src="http://placehold.it/50x50"></span>
</li>
<li>
<p style="color: white; margin-top: 20%;">Nombre y apellido usuario</p>
</li>
</ul>
</div>
<!--Mid Nav Div-->
<div class="col-sm-4 text-center"><h3 style="color: white; margin-top: 5%;">LOGO</h3></div>
<!--Right Nav Div-->
<div class="col-sm-4">
<ul class="nav navbar-nav navbar-right" style="margin-top: 2%; ">
<li>Logout <span class="glyphicon glyphicon-off"></span></li>
</ul>
</div>
</nav>
</div> <!-- End Col-MD-12-->
</div> <!--End Row-->
</div> <!--End Container-->'
This can be done it many ways.. I have just added some inline css in your html for normal view(desktop view).Yet you can try better option to make it work responsively.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
}
#profile {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav navbar-left top-nav" style="margin:10px;">
<img id="profile" width="50px" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<p style="display:inline;">Nombre y apellido usuario</p>
</div>
<div class="navbar-header" style="margin:0.2% 25%;">
<img width="100" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
<ul class="nav navbar-right top-nav" style="margin:0.8% 1%;">
<li>Logout<i class="mdi mdi-logout"></i></li>
</ul>
</nav>
</div>
At the end I find the solution. I have been searching and I found a solution to center the elements vertically:
https://stackoverflow.com/a/35388513/1888372
Here it's says to use display: flex; align-items: center; on parent div, so the result is:
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
height: 76px;
display: flex;
align-items: center;
}
.navbar p {
display: inline;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important;
display: block;
}
#profile {
border-radius: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="col-sm-4">
<img class="img-circle" src="assets/images/nobody.jpg" width=60>
<p>Nombre y apellido usuario</p>
</div>
<div class="col-sm-4 text-center">
<img src="assets/images/logo.jpe">
</div>
<div class="col-sm-4">
<div class="nav navbar-nav navbar-right">
Logout<i class="mdi mdi-logut"></i>
</div>
</div>
</nav>
</div>
</div>
</div>
Now it is finished (I have to fix some issues but I can do by myself).t
I can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:
I have been checking my code and I can't find it :(
Someone can help?
I'm cooding in just html and css, I know that
body{
background: black;
}
section.home{
margin-top: 0;
background: url(../img/bg-01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pull-left{
}
.ingresar-bg{
background-color: gray;
}
.ingresar{
margin: 50px 60px;
border: solid 1px white;
color: white;
background-color: rgba(0,0,0,0);
padding: 10px;
display: inline-block;
}
.ingresar:hover, .ingresar:active, .ingresar:visited{
background-color: gray;
color: white;
border: solid 1px white;
}
input.form-control{
margin-bottom: 15px;
}
.logo-modal{
margin-left: auto;
margin-right: auto;
}
.img-svg-logo{
margin: 35px 50px;
color: rgb(255, 255, 255);
width: 200px;
position: fixed;
}
#media (max-width:640px) {
.img-svg-logo{
width: 150px;
}
.ingresar{
font-size: 15px;
}
}
.cover-text {
text-align: center;
color: white;
vertical-align: middle;
font-size: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
.input-lg{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
}
input[placeholder].position{
text-align: center;
background-position: left center;
padding-left: 5px;
background-image: url(../img/ubicacion1.svg);
background-repeat: no-repeat;
}
.servicio-button{
background: #2260ad;
font-size: 25px;
border: solid 1px #2260ad;
border-radius: 0px;
width: 300px;
margin-bottom: 100px;
margin-top: 100px;
}
.servicio-button:hover{
background-color: #194984;
border: solid 1px #194984;
}
.modal-content {
position: relative;
background-color: gray;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.iconos{
color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
<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 rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div="container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left">
<a href="index.html">
<img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
</a>
</div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" />
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead">
Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
</div>
</div>
<!--
</section>
<section class="function">
<div class="cover-text" id="function">
<h1>¿Cómo funciona?</h1>
<p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
</div>
<div class="row iconos block-center" id="iconos">
<div class="col-md-4">
<img src="assets/img/ubicacion-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/servicios-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/agenda-img.png" class="img-responsive color" />
</div>
</div>
</section>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Try this code. Edited and alligned some code.
HTML
<!DOCTYPE html>
<html lang="es">
<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 rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div "container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
</div>
</div>
</section>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Additional CSS
.row {
margin-right: auto;
margin-left: auto;
}
Actually it is the problem with bootstrap row class.
Check this code . It works
Working example http://www.bootply.com/coISbk1PgQ
I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.
.container = always leaves a wide padding on both sides of the page.
.container-fluid = leaves a small padding.
.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.
So putting this together
<div class="container-fluid">
<div class="row">This container will stretch from one side of the page to the order</div>
<div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>
</div>