I am trying to add a background image to a divwhich will b e reffered from external stylesheet but failed to do so.Pls tell me how to do it.
.header {
height: 278px;
width: 100%;
display: inline-block;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.navbar-custom {
margin: 45px;
}
.color {
background-color: #7b97ac;
}
.nav {
font-size: 25px;
}
.nav li a {
color: #000;
}
.nav li a:hover {
color: #E50894;
}
.nav .active a {
color: #E50894;
}
.back {
background-image: url(../img/home.jpg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Themida Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header">
<img src="img/Themida_logo.png" class="center">
<nav class="navbar navbar-custom center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar color"></span>
<span class="icon-bar color"></span>
<span class="icon-bar color"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>CONTACT US</li>
<li>LINKS</li>
</ul>
</div>
</nav>
</div>
<div class="back">
</div>
</div>
</body>
</html>
![This is the image i want to use as background
]1
Please help me.
You need to edit the .back class in your CSS file and add these:
.back {
background-image: url('https://i.stack.imgur.com/Dg4go.jpg');
background-size: cover;
width:600px; /* this can be adjusted to your taste*/
height:200px; /* this can be adjusted to your taste*/
}
In your HTML file you need to add content to see the image properly e.g
<div class="back">
<br><br><hr><br> <!-- add as many as you can for test purposes -->
</div>
Depending on the type of content you intend to add to the div, the width and height properties in the CSS might need to be tweaked, or even removed. Good luck.
You just need to add the height/width so that you can see the background-image, since it does not have any child
.back {
background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
background-size: cover;
height: 300px;
width: 500px;
}
<div class="back">
</div>
If you add some content, you can see the image without adding width or height
.back {
background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
background-size: cover;
}
<div class="back">
<br/><br/><br/><br/><br/><br/><br/>
</div>
The div has no dimensions (height, width) and therefore the background image won't show. It will only automatically show image if it is an IMG tag
Related
There is a white space gap at the bottom of mine webs
Header and CSS#
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>We CARE for your health</title>
<link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Online Clinic</title>
<link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
<!--For home page's below slider's content-->
<!--For home page's below slider's content-->
<style>
/*The control button to black color*/
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
/*For home page's below slider's content*/
.how-section1{
margin-top:-15%;
padding: 10%;
}
.how-section1 h4{
color: #ffa500;
font-weight: bold;
font-size: 30px;
}
.how-section1 p{
text-align: justify;
text-justify: inter-word;
}
.how-section1 .subheading{
color: #3931af;
font-size: 20px;
}
.how-section1 .row
{
margin-top: 10%;
}
.how-img
{
text-align: center;
}
.how-img img{
width: 70%;
}
.lastImg img{
width: 80%;
}
/*For home page's below slider's content*/
.foot {
position: fixed;
bottom: 0;
width: 100%;
height: 70px; /* Height of the footer */
background: white;
}
</style>
# Body#
<body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
<div class="m-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ">
<b>Home</b>
<b>Profile</b>
<b>Messages</b>
<b>Reports</b>
</div>
<div class="navbar-nav ms-auto">
<b>Login</b>
</div>
</div>
</div>
</nav>
</div>
Footer#
<div class="foot">
<footer class="text-center text-black position-relative" style="background-color:white">
<div class="social">
<i class="icon ion-social-instagram px-5"></i>
<i class="icon ion-social-snapchat px-5"></i>
<i class="icon ion-social-twitter px-5"></i>
<i class="icon ion-social-facebook px-5"></i></div>
<br>
<ul class="list-inline">
<li class="list-inline-item px-3">Home</li>
<li class="list-inline-item px-3">Services</li>
<li class="list-inline-item px-3">About</li>
<li class="list-inline-item px-3">Terms</li>
<li class="list-inline-item px-3">Privacy Policy</li>
</ul>
<p class="copyright text-center">Mediklinik Kampar © 2022</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>
You can solve your problem like this way,
<body>
<main></main>
<footer>
<span>This is a footer</span>
</footer>
</body>
Step 1: Set your body min-height: 100vh; and position: relative;
Step 2: Set your footer width: 100%;, position: absolute; and bottom: 0;
Here is the css,
body {
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
width: 100%;
background: lightgray;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
}
you can fix the issue by yourself by right clicking on the page and select Inspect option.
I am a beginner trying to do a school project every time after watching tutorial I still couldn't able to figure out why my image is not working in css. Hereby attaching my code for both Html and Css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="hero">
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
header {
height: 100%;
color: red;
background: url('../img/hero.jpg');
}
.hero {
position:left;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
Try adding a tab to your height attribute where your header selector is at.
You can use vh (viewport height) instead of percent to achieve this – learn more about viewport units here: Fun with Viewport Units
Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.
Try changing your header CSS:
header {
height: 75vh; /* 100vh would be the full height of the viewport */
color: red;
background: url('../img/hero.jpg');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css"
/>
<link rel="stylesheet" href="/Assets/style.css" />
<style>
header {
color: red;
background: url(https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80);
background-position: center;
height: 100vh;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar-links ul {
display: flex;
justify-content: space-between;
}
.navbar-links ul li {
margin-right: 2rem;
list-style: none;
margin-top:2rem;
}
.navbar-links ul li a {
text-decoration: none;
font-size: 20px;
color: #fff;
background-color:rgb(93, 84, 84);
padding:10px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="hero"></div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
Check your css if it is working properly for example set the background of your body to red and check your image if it is in jpg or jpeg format.
No matter what I do, when resizing the screen or going on mobile, everything overlaps each other and images size down when they aren't supposed to.
Here is what the navigation bar looks like when resized:
Here is how it is supposed to be:
I did find a potential solution with the text, but it isn't exactly the solution I want. Especially with position: relative, which, for me, is hard to deal with since, no matter where you move your divs, it still processes it as being where it originally was. That is why I usually work with absolutes. So, if there is an alternative solution for that, it would be greatly appreciated. :)
What I am having a problem with at the moment is the image. If I do position: relative it resizes it when you change the browser size. I figured out a way to make it stabilize when it is absolute, but it still overlaps with other media when the browser is resized.
I have tried #media, (which for some reason breaks the whole browser, makes something disappear, or doesn't work,) overflow: hidden/auto, margins, paddings, indexes, max-width, max-height, ect. I can't seem to find a solution, though.
Here is the html and css code.
.nav-bar-links a {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #fff;
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
color: 6s;
}
.nav-bar-links a:hover {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: rgb(253, 253, 159);
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
transition: color 0.6s;
}
.nav-logo img {
position: absolute;
max-width: 25%;
max-height: 20%;
z-index: 1;
float: left;
margin: 0x 20px 20px 20px;
padding: 0;
}
.nav-text-link a {
text-transform: uppercase;
text-decoration: none;
position: relative;
padding: 0px 20px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: bold;
font-size: 50px;
float: left;
z-index: 1;
top: 10px;
left: 12%;
color: 6s;
}
.nav-text-link a:hover {
color: rgb(253, 253, 159);
color: 6s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="nav-bar-wrapper">
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="nav-logo">
<img src="/image.png">
</div>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
Thank you!
You haven't told us what you want to achieve exactly, but first step is to remove everything that makes the image behave weirdly, notably negative margin, float and position. Try to avoid these things as much as possible.
If you want to put columns or elements next to each other, you should use flex declarations on the parent element, the div that wraps the elements you want to arrange. Note that I moved your container-fluid out so it wraps everything. Not good to nest multiple containers inside one another.
Let me know where we want to take this from here (see, no overlapping!):
* { box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav-logo img {
width: 100%;
margin-top: 2rem;
}
.nav-bar-wrapper {
padding: 1rem 2%;
display: flex;
align-items: center;
justify-content: space-between;
background: pink;
}
.nav-bar-links {
display: flex;
justify-content: space-between;
width: 60%;
}
.container-fluid {
max-width: 1400px;
}
.row {
margin: 0 4%; /* margin on each side of content */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="nav-bar-wrapper">
<div class="logo"><h1>LOGO</h1></div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="row">
<div class="column nav-logo">
<img src="https://wallpapercave.com/wp/ylvyN1V.jpg" alt="National park" title="National Park">
</div>
</div>
<div class="row">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="`nav-bar-wrapper`">
<div class="nav-logo">
<img src="/image.png">
</div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
add this css
.nav-bar-wrapper{
display:flex;
justfy-contant:space-between;
}
donot use any asolute positioning that is what is causing it to overlap
In this one page site my aboutus and contact are not taking full width and height which i need.anymore suggestions are more welcomed.how to shrink top nav bar when about service and contact page comes.
/*!
* Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.about {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.services{
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.contact {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ITspectra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/carousel-3d.js" ></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="css/scrolling-nav.css" rel="stylesheet">
<style>
#wrapper {
width: 100%;
height:100%;
background-color: tan;
float:left;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color:black;
width:100%;
height:110px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
ul.nav.navbar-nav {
margin-left: 36%;
margin-top: 22px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<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.php"><img src="its.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<div data-carousel-3d >
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d//images/left.png" data-carousel-3d-left />
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d/images/right.png" data-carousel-3d-right />
<ul data-carousel-3d-children>
<li><img src="https://unsplash.it/640/420?image=628" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=633" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=626" /></li>
<li selected><img src="https://unsplash.it/640/420?image=629" /></li>
</ul>
</div>
</div>
<div class="container-fluid text-center">
<h3>Welcome to IT Spectra</h3><br>
<p id="ccont">IT Spectra excels in providing custom software and
mobile apps that match your speci cations, which is
just one of its many advantages: Extensive Team of experienced
professionals. 15+ years of IT experience.
Unique Ideas Expand skilled resources. Well within
budget and time constraints. Gain competitive advantage
in the market..</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="about">
<h2>About Us</h2>
<p id="fcont">IT Spectra excels in providing
custom software and mobile apps
that match your specifications,
which is just one of its many
advantages</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="services">
<h2>Company</h2>
<p id="fcont">Company Overview
Meet The Team
Our Awesome Partners
Our Services</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="contact">
<h2>Address</h2>
<p>IT SPECTRA<br/>
Flat-1A,1st Floor,<br/>
Plot No.38,James Street,<br/>
Ram Nagar-North,<br/>
Madippakkam,Chennai-91.</br>
Phone : 044 - 4957 7990<br/>
E-mail : info#itspectra.com<br/>
Web : www.itspectra</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Are you trying to reduce the height of the nav bar?
If so then you can use the following css override:
.navbar {
height: auto !important;
}
I have a design I have mocked up in photoshop using a Bootstrap 12-column guide. Whenever I try to mock this up in Bootstrap, the results are NOTHING like what I want.
My HTML Code:
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-color: #cacaca;
}
.container{
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border: 0px solid black;
border-radius: 0;
b ackground-color: #2a2b2d;
}
.bottom-nav {
background-color: #1d1e20;
border: 0px solid black;
margin-top: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 100px
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-left{
margin-top: 105px;
border:1px solid black;
background-color:white;
}
.blog{
border:1px solid black;
background-color:white;
margin-right: 10px;
}
.sidebar{
margin-left: 10px;
border:1px solid black;
background-color:white;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: 280;
width:280;
margin:20px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<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>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<nav class="bottom-nav">
</nav>
<div class="container text-center">
<div class="row content">
<div class="col-md-3 text-left">.col-md-3</div>
<div class="col-md-3 text-left">.col-md-3</div>
<div class="col-md-3 text-left">.col-md-3</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-9 blog">.col-md-9</div>
<div class="col-md-3 sidebar">.col-md-3</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
My problem is that in my mockup, I have 10px of "gutter" between each column, whenever I add this in with "margin" CSS, it throws the page out of whack.
Also, the main blog block (the big white one) is 9 columns. the sidebar(black thing next to it) is 3 columns. Whenever I input the respective columns WITH margin, it pushes it to a new line. Like so:
I'm really new to bootstrap, but it's throwing me for a loop! Any help is appreciated! I would really like to learn this properly.
Also, is there any way to center the columns like I have in my mockup?
first: remove the margin-right and margin-left from .blog and .sidebar.
then: you can put a div inside div.col-md-3 with width:100% and background-color: white, and remove background-color:white from div.sidebar.
.blog{
border:1px solid black;
background-color:white;
}
.sidebar{
border:1px solid black;
}
.with-space {
width: 100%;
background-color:white;
}
/*-------------------*/
<div class="row">
<div class="col-md-9 blog">col-md-9</div>
<div class="col-md-3 sidebar">
<div class="with-space">col-md-3</div>
</div>
I hope it helps you...
Have you tried closing the container div after the first row, and opening a second container for the second row? Bootstrap does a wrap-around type thing when you exceed 12 columns in a container