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>
Related
I have a problem with using background-image in style in my HTML page.I am creating login page in my Django application and when I execute the page, the background image is not displaying. Interestingly, this code worked yesterday and not today.
I've already deliberately placed the image and the file in one folder to avoid path problems.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
body {
margin-top: 20px;
background: rgb(184, 213, 242);
}
.account-block {
padding: 0;
background-image: url('login.jpg') !important;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: relative;
}
.account-block .overlay {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.account-block .account-testimonial {
text-align: center;
color: #fff;
position: absolute;
margin: 0 auto;
padding: 0 1.75rem;
bottom: 3rem;
left: 0;
right: 0;
}
.text-theme {
color: #5369f8 !important;
}
.btn-theme {
background-color: #5369f8;
border-color: #5369f8;
color: #fff;
}
</style>
</head>
<body>
<div id="main-wrapper" class="container" style="text-align:center; width:100%;">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="card border-0">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-6">
<div class="p-5">
<div class="mb-5">
<h3 class="h4 font-weight-bold text-theme">Login</h3>
</div>
<h6 class="h5 mb-0">Welcome back!</h6>
<p class="text-muted mt-2 mb-5">Enter your User ID and password to access admin panel.</p>
<form method="POST" action="">
{% csrf_token %}
<div class="form-group">
<label for="exampleInputText1">User ID</label>
<input type="text" name="username" class="form-control" id="exampleInputText1">
</div>
<div class="form-group mb-5">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-theme">Login</button>
Forgot password?
</form>
</div>
</div>
<div class="col-lg-6 d-none d-lg-inline-block">
<div class="account-block rounded-right">
<div class="overlay rounded-right"></div>
<div class="account-testimonial">
<h4 class="text-white mb-4">Test 1</h4>
<p class="lead text-white">"Test 2"</p>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body -->
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
</div>
<!-- end card -->
<p class="text-muted text-center mt-3 mb-0">Don't have an account? register</p>
<!-- end row -->
</div>
<!-- end col -->
</div>
<!-- Row -->
</div>
</body>
</html>
Any ideas on how to fix this?
I could be wrong here but I would try out this solution.
Try changing
background-image: url('login.jpg')
to:
background-image: url('../indentification/login.jpg')
I'm not sure that you eliminated the path problem exactly.
Finally, I have created content folder and: background-image: url('../../static/app/content/login.jpg');
I'm working on a site for a class project and everything is working fine except when I tried to make the footer sticky the sidebar overlaps the footer when content is added dynamically.
I have the sidebar height set to 90vh because I could not figure out how to get the background color to take up the full height of the sidebar when there was no content I set the sidebar overflow to auto which was working fine but when I try to make the footer sticky it works find until the content grows to big. Scrollbars do appear but the sidebar overlaps the footer.
Here is the html & css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.main-image {
background-image: url(../images/crypto.jpg);
background-repeat: no-repeat;
height: 90vh;
max-width: 100%;
clip: rect(0, 400px, 200px, 0);
}
.sidebar {
height: 90vh;
overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto & Cocktails </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.ico">
</head>
<body>
<!-- header -->
<header id="top">
<div class="row">
<div class="col s12 center #26a69a teal lighten-1">
<img src="assets/images/cryptococktailsheader.jpg" class="responsive-img" alt="Crypto & Cocktails" />
</div>
</div>
</header>
<main>
<div class="row">
<!-- sidebar -->
<div class="col s12 l2 #00695c teal darken-3 sidebar">
<span class="flow-text center">
<h5 class="white-text">Search Coinbase</h5>
<form id="coin-search" action="">
<input id="coin-input" type="text" class="white" name="coin-input"
placeholder="Cryptocurrency Ticker">
<button class="btn btn-lg btn-primary submitButton">Search</button>
</form>
</span>
<div id="myCoins" class="col-12"></div>
</div>
<div class="col s12 l10 content">
<div class="row">
<div class="col s12 l3 ">
<h2 id="coin-name"></h2>
<span id="coin-display" class="flow-text"></span>
<h3 id="drinkName"></h3>
<span id="drinkImg"></span>
<a class="right hide-on-med-and-up" href="#top">Back to top</a>
</div>
<div class="col s12 l7 main-image hide-on-small-only"></div>
</div>
</div>
</div>
</main>
<footer class="#26a69a teal lighten-1 center">
<div class="container">
<div class="row">
<div class="col l12">
<h5 class="white-text">Developers - Contact Us</h5>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021 Copyright
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Materialize Framewrk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<!-- Custom Scripts -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/cocktail.js"></script>
<script src="./assets/scripts/coinbase.js"></script>
</body>
We just had to add the z-index: 1; to the footer.
I'm trying to align buttons at the bottom left of a banner. I tried with a sample code but it gets misaligned every time the resolution changes.
Tried html code here,
<div class="row">
<div class="col-sm-12 header" style="background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg); background-repeat: no-repeat; background-size: 100% 100%;">
<div class="row">
<div class="col-sm-9"></div>
<div class="col-sm-3" style="margin-top: 12%">
<div class="row " style="margin-top: 46%; margin-left: 254px !important;">
<button class="btn btn-primary">Button1</button>
</div>
<div class="row " style="margin-top: -7%; margin-left: 367px !important;">
<button class="btn btn-success">Button2</button>
</div>
</div>
</div>
</div>
Fiddle
.header {
background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 10rem;
object-fit: scale-down;
}
.btn {
margin-top: 8.5rem;
margin-left: 0.5rem;
}
<div class="row">
<div class="col-sm-12 header">
<div class="column">
<button
class="btn btn-primary">
Button1
</button>
<button class="btn btn-success">
Button2
</button>
</div>
</div>
</div>
For your background scaling, having a look at this link: https://www.w3schools.com/css/css3_object-fit.asp
Or you could try using flex for the layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a way to place the buttons as desired in the bottom left corner of the banner based on the existing code:
<html>
<head>
<title>Bootstrap Example</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.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div
class="col-sm-12 header"
style="
background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
"
>
<div class="row">
<div class="" style="margin-top: 12%"></div>
<div class="" style="display: flex; align-items: flex-end">
<div>
<button class="btn btn-primary">Button1</button>
</div>
<div>
<button class="btn btn-success">Button2</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To position the buttons bottom right, you need to add justify-content: flex-end; to the wrapping div
Hi i know this is an amateur question, but i have some trouble.
This is my CSS`:
body{
background-image: url(street-photography1.jpg);
background-size: cover;
color: white;
background-repeat: no-repeat;
background-position:center;
background-attachment: fixed;
}
form{
background-color: rgba(19, 18, 18, 0.66);
color: white;
padding: 40px;
margin-top: 200px;
padding-bottom: 60px;
}
.form-control{
background-color: rgba(14, 14, 14, 0.35);
border-radius: 0px;
color: white;
}
.logo1{
padding: 40px;
margin-top: 200px;
}
h1{
text-align: center;
}
.btn{
width: 100%;
margin-top: 20px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div class="container">
<div class="column">
<div class=" col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
</div>
<div class="row">
<div class="col-sm-offset-6 col-sm-7">
<form>
<h1>Hello, world!</h1>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Password
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<footer class="container">
<div class="row">
<p class="col-sm-5">
Copyright © 2016 , Singapore. All rights reserved.</p>
</div>
</footer>
</body>
</html>
So currently my webpage looks like this.
How can i shift my message logo so that the logo and my validation form are in the same line with each other?
You can next the two col divs inside of a row. i.e.
<div class="row">
<div class="col-sm-12>
<div class="row">
<div class="col-sm-6>...Logo...
<div class="col-sm-6>...Form...
</div>
</div>
</div>
</div>
Try adding col-sm-offset-6 to the logo container if you want to align them vertically.
<div class="col-sm-offset-6 col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
Or, if you want them aligned horizontally, the answer posted by #DPalmquist should do it.
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;}