So im creating a website in bootstrap and im having 3 backgrounds under each other in div's. The thing is, the second and third background won't show up under the first one. So the page just shows up as one div with only the .one background, the other ones won't appear. It worked before... so I don't know if I messed something up that ruined it or something?
HTML:
<body>
<div class="container-fluid one">
<nav>
<li class="nav-item">
<a class="nav-link" href="">HOME</a>
<br>
<a class="nav-link" href="">OVER DE CAMPAGNE</a>
<br>
<a class="nav-link" href="">WORD JIJ BESPEELD?</a>
</li>
</nav>
<img class="sire" src="img/Sire.png">
<h2 class="headline">Wees geen pop,<br>
want je valt hardop
</h2>
<div class="center"><img class="marionet" src="img/marionet.png">
</div>
</div>
<div class="container-fluid two">
</div>
<div class="container-fluid three">
</div>
</body>
CSS:
a {
font-family: Zing Rust Demo Base;
text-decoration: none;
color: white;
font-size: 48px;
letter-spacing: 3px;
line-height: 1.75;
}
a:hover {
text-decoration: none;
color: white;
}
li {
list-style-type: none;
}
h2 {
font-family: Zing Rust Demo Base;
font-size: 36px;
color: white;
}
.headline {
padding-top: 400px;
padding-left: 15px;
}
.sire {
height: 50px;
width: 125px;
float: right;
margin-top: 450px;
}
.marionet {
width: 400px;
height: 700px;
margin-top: -800px;
margin-left: 570px;
}
.center {
display: inline;
}
.one {
background-image: url(../img/Deel1.png);
background-repeat: no-repeat;
}
.two {
background-image: url(../img/Deel2.png);
background-repeat: no-repeat;
}
.three {
background-image: url(../img/Deel3.png);
background-repeat: no-repeat;
}
This is because those containers are empty. You need to add at least one row-column pair into each one.
Once you have created those row-column pairs you either need to add some content into the columns or you need to specify the height for those columns otherwise they will be zero height and that's the reason why you don't see those background images.
This is what the code for the 2 empty containers should look like:
<div class="container-fluid two">
<div class="row">
<div class="col">
Content <br> goes <br> here...
</div>
</div>
</div>
<div class="container-fluid three">
<div class="row">
<div class="col">
Content goes here...
</div>
</div>
</div>
And of course, you can put more than one column into each row.
Related
I'm building the website and I want to reach the section like on my psd (img attached):
You can see that there's 100% width section and .col-md-9 and .col-md-3 inside this section.
But when .col-md-3 ends its background should continue and pave the background of the main section.
How can I make the column's background continue? I've spent hours solving this problem but I didn't find the correct way. Thanks!
.single__content {
width: 100%;
max-width: 743px;
padding-top: 57px;
}
.single__content p {
color: #707070;
font-size: 15px;
font-weight: 400;
line-height: 23px;
}
.single__meta {
background: #3c73ba;
height: 70px;
}
.single__meta h2 {
font-size: 38px;
font-weight: 300;
line-height: 42px;
color: #fff;
margin: 0;
padding-top: 14px;
}
.col-sidebar {
background: #4285db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="single__meta">
<div class="container">
<div class="row ">
<div class="col-md-9">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
</div>
</div>
</div>
You can split the background of your top with background: linear-gradient.
Demo with bootstrap 4
.top-bar {
background: linear-gradient(
to right,
#3c73ba 0%,
#3c73ba 50%,
#4285db 50%,
#4285db 100%
);
width: 100%;
padding: 0;
margin: 0;
color: #fff;
}
.col-left{
background: #3c73ba;
}
.col-right {
background: #4285db;
}
<div class="top-bar" style="padding: 0">
<div class="container">
<div class="row">
<div class="col-left col-md-9">
<h2>left</h2>
</div>
<div class="col-right col-md-3">
<h2>right</h2>
</div>
</div>
</div>
</div>
"make this changes in your code" hope this u want
<div class="row col_bg">
<div class="col-md-9 ">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
<div class="clear">
</div>
</div>
"for css"
.row.col_bg {
background-color: #4285db;
clear: both;
}
.col-md-9 {
float: left;
width: 70%;
}
.single__meta h2 {
color: #000;
font-size: 38px;
font-weight: 300;
line-height: 42px;
margin: 0;
}
.col-sidebar.col-md-3 {
float: right;
width: 30%;
}
.clear {
clear: both;
}
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm having a problem with this layout. Everything went smooth up until I got past the "section banner". Nothing will respond to CSS correctly. I can't align anything. I got the "col-md-4" to center correctly, but the header above it will not move where i want it. The only way I can get it to center is to put it in between the "row" div. But that doesnt solve the face that I can't adjust the padding/margin for it at all.
Also the footer is completely out of wack. Can't get it to center. Nothing.
html,
body {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-size: 16px;
}
.header {
max-width: 100%;
margin: 0 auto;
}
/* Header */
.nav {
position: relative;
top: 10px;
}
.nav-pills li a {
color: #d8192f;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
background-color: rgba(216, 25, 47, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
}
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/* Jumbotron */
.jumbotron {
height: 500px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg) no-repeat center center;
background-size: cover;
height: 500px;
margin-top: 10px;
}
.jumbotron h2:first-child {
margin: 100px 0 0;
}
.jumbotron h2 {
color: white;
font-size: 60px;
text-align: right;
margin: 0;
}
/* Banner */
.banner,
.supporting {
text-align: center;
padding-top: 20px;
}
.banner {
background-color: #36343f;
height: 150px;
color: #fff;
margin-bottom: 30px;
}
.btn {
background-color: rgba(216, 25, 47, .5);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
margin-top: 10px;
}
}
/* Media Queries */
#media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
.header2 h2 {
position: relative;
width: 100%;
margin: 0px 0px 0px 0px;
text-align: center;
clear: both;
}
.footer {
max-width: 33%;
margin: 0 auto;
display: inline-block;
clear: both;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<h1>BestBite</h1>
</div>
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li class="active">About
</li>
<li>Sign Up
</li>
<li>Log In
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="col-md-4">
<h2>Browse.</h2>
<h2>Create.</h2>
<h2>Share.</h2>
</div>
</div>
</div>
<div class="section banner">
<div class="container">
<h3>Always have the answer to "What's for dinner?"</h3>
<a class="btn" href="#">Learn More</a>
</div>
</div>
<div class="section">
<div class="container">
<div class="header2">
<h2>Test</h2>
</div>
<div class="row row-centered">
<div class="col-md-4">
<h3>One</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<div class="col-md-4">
<h3>Two</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<div class="col-md-4">
<h3>Three</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="row">
<div class="col-md-4">
<p class="a-left">One</p>
</div>
<div class="col-md-4">
<p class="a-center">One</p>
<div>
<div class="col-md-4">
<p class="a-right">One</p>
</div>
</div>
</div>
</body>
</html>
You have on extra } at your css (before the media queries).
Also, you had to set a div block with 100% width to center your footer, and add text-align: center to the child p tags.
For footer margin on large screen, just add:
.row .footer{
margin: 30px 0
}
JSfiddle: https://jsfiddle.net/1pwbhuzz/3/
With this you'll have the footer columns centered:
HTML
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4"><p>One</p></div>
<div class="col-xs-12 col-md-4"><p>One</p></div>
<div class="col-xs-12 col-md-4"><p>One</p></div>
</div></div>
</div>
CSS
.footer p {
text-align: center;
}
And delete the footer class in your media query.
I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.
I have a few anchor tags in my html that for some reason aren't working. As far as I can tell there is nothing wrong with the code so I am completely at a loss. Maybe I need a fresh pair of eyes to look it over to see if there is something obvious that I am missing? This website is not loaded onto a server yet but here is the code I am having issues with.
<div id="navigation">
<div class="wrapper">
<div class="right">
<div class="phone-number">
<p>24hr Turn Around Time 1-877-229-9665</p>
</div>
<div class="social-media">
<img src="images/facebook.png">
<img src="images/twitter.png">
<img src="images/yelp.png">
</div>
</div>
<div class="left">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="text">
<p>Custom Made Orthotics</p>
</div>
</div>
<div class="navbar">
<nav>
HOME
SERVICES
COMPANY
CONTACT US
NEWS
</nav>
</div>
<div class="clear"></div>
</div>
</div>
#header {
font-family: calibri;
}
.text {
text-align:left;
font-size: 20px;
}
.navbar {
text-align: center;
font-color: #000000;
padding: 30px 20px 4px;
}
.phone-number {
text-align: right;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #000000;
height: 80px;
padding-top: 5px;
background-color: #ffffff;
z-index: 1;
}
#navigation a {
font-size: 20px;
padding-left: 5px;
padding-right: 15px;
color: #000000;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
.social-media {
text-align: right;
margin-top: 40px;
}
Fiddle, they seem to actually be working, as in they are all working links.
<div class="social-media">
<img src="images/facebook.png">
<img src="images/twitter.png">
<img src="images/yelp.png">
</div>
</div>
Ok so I had a co-worker fix this issue. changed the position to relative and added a z-index of 20. Now they are working!