I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
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">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
Related
I'm trying to nest containers with Twitter Bootstrap to achieve the following in this screen shot. In the PSD the bubble image height is 404px. I need this to look good across all devices, so responsiveness is a must and should scale accordingly without overwhelming the screen.Could somebody please point me in the right direction to nail the CSS down for this?
I have added what I've done so far in Bootstrap to make this happen but it is off and need to get the containers right. I've read that containers in bootstrap shouldn't be nested but "can be".
I have nested containers but can't seem to achieve what is in the screen shots with Bootstrap.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div class=".container-fluid">
<div class="row">
<div class="col-lg-12 top">
TOP TRENDING STORY FOR AUGUST 21, 2019
</div>
</div>
<div class="row">
<div class="col-lg-12 bg-top">
<div class="container">
<div class="row">
<div class="col-md-6">
test 1
</div>
<div class="col-md-6">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.top{
background-color: #d42222;
color:#FFFFFF;
font-size:23px;
text-align: center;
}
.bg-top{
background:transparent url('../images/background-top.png') no-repeat center center /cover;
}
This needs some styling to get what you want; You can take a look at the left and right margins which are inserted by Bootstrap .container and may want to override them; to get closer to the image you shared, I added some top and bottom margins myself;
Complete working snippet below:
.redBanner {
background: red;
}
.redBanner p {
margin-bottom: 0;
}
.myExternalContainer {
background-image: url("https://www.akberiqbal.com/Jumbo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: lightblue;
padding-bottom: 5%;
}
.myInternalContainer {
margin-top: 10%;
margin-bottom: 10%;
}
.innerMostContainer {
margin: 10%;
}
.innerMostContainer button {
width: 100%;
}
.container {
background: #fff
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid myExternalContainer">
<div class="row">
<div class="col-lg-12 top redBanner">
<p class="text-center">TOP TRENDING STORY FOR AUGUST 21, 2019</p>
</div>
</div>
<div class="container myInternalContainer">
<h3 class="text-center"> medicare</h3>
<div class="row">
<div class="innerMostContainer">
<div class="row">
<div class="col-lg-12 bg-top">
<img src='https://www.akberiqbal.com/src/images/LinkedIn4.png' class='img-fluid' />
<div class="row">
<div class="col-6">
Author Name
<br/> Published date
</div>
<div class="col-6">
<button type="button" class='btn btn-primary'>Read time</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I was following this tutorial on youtube and when it came time to view my work and align the text with the icons horizontally, they remained stacked. What is an alternate way to use bootstraps grid system to align them horizontally instead of stacked on top of each other? I'm at a lost at how to fix this mess, it seems the tutorial was more for intermediate level coders.
body {
font-size: 15px;
font-family: arial,helveitca,sans-serif;
padding: 0;
margin: 0;
background-color: #dcdde1;
}
.container{
width:80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
/* ------------ header ---------- */
header {
background: #7f8fa6;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #192a56 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li {
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding {
float:left;
}
header #branding h1 {
margin: 0;
}
header nav {
float:right;
margin-top:10px;
}
header .highlight, header .current a {
color: #40739e;
font-weight: bold;
}
header a:hover{
color:#cccccc;
font-weight: bold;
}
/*-----------showcase------------*/
#showcase {
min-height: 400px;
background:url(../images/laptop.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color:white;
}
#showcase h1 {
margin-top:100px;
font-size:55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/*-----------newsletter--------------*/
#newsletter {
padding:15px;
color:white;
background: #7f8fa6
}
#newsletter h1{
float:left;
}
#newsletter form {
float:right;
margin:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:40px;
width: 250px;
}
.button_1{
height:40px;
background-color: #fbc531;
border:0;
padding-left: 20px;
padding-right: 20px;
color:#353637;
}
#boxes {
margin-top: 20px;
}
#boxes .box {
float:left;
text-align: center;
width:30%;
padding:10px;
}
footer {
padding:20px;
margin-top: 20px;
color:white;
background:7f8fa6;
text-align: center;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="description" content="Affordable Web Design For Small and Medium-sized Companies">
<meta name="author" content="Keith Segovia">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="normalize.css-master/normalize.css">
<link rel="stylesheet" href="css/mainfollow.css" type="text/css">
<title>Youtube Tutorial 1</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>
<i class="fa fa-rocket"></i> <span class="highlight">1-2-3</span> Web Design
</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Web Design For Small and Medium-sized Companies</h1>
<p>d stamp, an am rudely strut befor made to court an amber To this fair proportive to deep bounting upon of the souls of York; And now, insteadful merry merry mer bruised fore our bruised fright the capers nimbly instern al.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Get Our Newsletter</h1>
<form action="">
<input type="email" placeholder="Enter your email here">
<button type="submit" class="button_1">Subscribe
</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="box"><i class="fa fa-signal fa-5x"></i>
<h3>Grow Your Audience</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="box "><i class="fa fa-photo fa-5x"></i>
<h3>Modern Web Design</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
<div class="container">
<div class="box"><i class="fa fa-cube fa-5x"></i>
<div class="row">
<div class="col-lg-4">
<h3>Ultra Fast Hosting</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>1-2-3 Web Design Copyright © 2019</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
To create columns using bootstrap
step 1-create container.
step 2-create row inside the container.
step 3-create columns (while using grid system screen divided into 12 columns).
so if you want to create 3 equals columns then col-md-4 + col-md-4 + col-md-4= 12columns
if want to create 2 equal columns then col-md-6 + col-md-6 = 12 columns
if you want to create column of different size create part according to choice
(for eg want to create 2 different column do like this col-md-4 + col-md-8 =12 columns)
this is the approach we always follow while creating bootstrap columns
I hope you will understand what I want to say.
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
</div>
</div>
</section>
I'm trying to get three equally sized columns with same margin and background color. But I get column 1 with no margin and background color, column 2 and 3 appear no problem. I'm finding this really frustrating so any help would be greatly appreciated!
Here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
<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>
div1 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div2 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div3 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</body>
</html>
Here's the similar result i'm trying to get:
Here's the wrong one what I get:
As your using bootstrap you may as well use bootstrap, plus a little bit of css to pad the inner panels (to match your desired output). The HTML is all over the place (head code and div*'s).
So here is your code.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
.panel-pad-10 {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 1</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 2</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
From: http://getbootstrap.com/css/#overview-container
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
So, wrap it up in a container like this:
<div class="container">
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</div>
Or use "container-fluid" if you want full width
EDIT: As Lawrence pointed out, if you're going to use custom markup, you need to be sure that it has the display:block property set, otherwise it will not work
Just use Bootstrap. You don't want to override what Bootstrap provides.
<div class="row">
<div class="col-sm-4">
<div class="well">1
</div>
</div>
<div class="col-sm-4">
<div class="well">2
</div>
</div>
<div class="col-sm-4">
<div class="well">3
</div>
</div>
</div>
http://www.codeply.com/go/lUApj2LpiJ?q=
Have you tried Flexbox ?
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
min-height: 800px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 400px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
You really shouldn't "invent" your own html tags like this. <div1> is not a valid HTML tag.
Also, since div1, div2, and div3 all are supposed to be styled the same way, you can simply create a class for them like this:
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
Then, in your html, do this (combined with LordNeo's reply):
<div class="container">
<div class="row">
<div class="col-sm-4 column">Column 1 Div</div>
<div class="col-sm-4 column">Column 2 Div</div>
<div class="col-sm-4 column">Column 3 Div</div>
</div>
</div>
I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this?
HERE IS LIVE VERSION: http://codepen.io/anon/pen/waYBxB
THE HTML
</head>
<body>
<!--
==============================
LOGO HEADER
==============================
-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-6"></div>
</div>
</div>
</section>
<!--==============================
SLIDING BANNEER
==============================-->
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs"><img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"></div>
</div>
</section>
<!--==============================
MENU BAR
==============================-->
<section>
<div class="container">
<div class="col-md-12">
<nav>
<ul>
<li>Home</li>
<li>Codepen.io</li>
<li>A longer button</li>
<li>This is my really long button</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</section>
<!--==============================
MAIN CONTENT
==============================-->
<section>
<div class="container" id="MainPage">
<div class="row">
<div class="col-md-9 MainContent"><h3>codepen ---- CODING HAS NEVER BEEN SO EASY!</h3><br> Notice how the white is centered but he image and the logo is not. How do I fix this? </div>
<div class="col-md-2">I AM IN THE BANNER SECTION </div>
</div>
</div>
</section>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
THE CSS
body {
background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
}
nav ul {
list-style: none;
overflow: hidden;
height: 47px;
}
nav ul li a {
color: #F9F7F7;
background-image: linear-gradient(to top, #ff6351, #ffcc6e);
padding: 8px 22px 8px 22px;
display: block;
text-align: center;
font-size: 22px;
float: left;
margin-right: 5px;
color: rgb(255, 255, 255);
background-color: rgb(120, 120, 120);
text-shadow: rgb(79, 79, 79) 1px 1px 3px;
}
.Logo {
margin: 15px;
}
#MainPage
{
background-color: white;
}
.midText
{
text-align:center
}
.MainContent
{
margin: 33px;
}
this would bring the banner image to the center of the page. What you have to do is to add the infront of the image.
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs">
<center>
<img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive">
</center></div>
</div>
</section>
You should take advantage of the column system to help center your divs.
If you know bootstrap rows are 12 column-widths wide, you need a row that = 12 columns.
So...
<section>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-4"></div>
</div>
Now you have 4|4|4, but you could also do 3|6|3 or even 2|8|2 or 1|10|1. That should always center your divs. Hope that helped.
In case my mumbling makes no sense, here are pretty pictures with explenation: http://getbootstrap.com/examples/grid/
As you have a number of breakpoints, why not just set the width of the img in pixels? The aspect ratio of the img & the containing div are different, hence why it doesn't fit precisely.
display: block;
max-width: 1024px;
margin: 0px auto;
height: auto;
For the logo...
<div class="col-md-12"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
.Logo {
display: block;
margin: 15px auto;}
Quick solution for you.
So I'm new to html and css, and right now I'm trying to figure out how to fix the positioning on this page.
It normally looks like the first image in the album:
http://imgur.com/a/LHbRp
But for some reason there is this white-space to the left which can be scrolled to if, overflow-x is not "hidden" like the second picture of that album.
Also, I don't know if you people go on facebook or other websites (like this one even), but when you resize a page, the elements on the page don't start just jumping around, but if I have overflow-x: hidden; then I assume they elements have to jump around, and the text will start to wrap, like third picture in the album.
So how do I go about making the page not move around when the window is resized, and as a bonus, what is that whitespace?
-Chris
EDIT (some code):
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="shift.css">
</head>
<body>
<div id="wrapper">
<!-- Navbar stuff -->
<div class="nav">
<div class="container">
<ul class = "pull-left">
<li>Logo</li>
<li>Browse</li>
</ul>
<ul class = "pull-right">
<li>Sign Up/Login</li>
<li>Help</li>
</ul>
</div>
</div>
<!-- Main swipey thing -->
<div class ="jumbotron">
<div class ="container">
<h1>Blah blah blah</h1>
</div>
</div>
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container">
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container">
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<ul class="pull-right">
<li>Contact</li>
<li>About Us</li>
<li>Bug Tracking</li>
</ul>
</div>
</div>
</body>
And the css:
/*! Other stuff */
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/*! Navbar css */
.nav {
background-color: #DEB087;
border-bottom: 1px solid #DEB087;
}
.nav a {
color: #875D4B;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
}
.nav li {
display: inline;
}
/*! jumbotron */
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #DEB087;
font-size: 40px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
/*! Buy/Sell */
.portals {
background-color: #f7f7f7;
padding: 14px 10px;
border-bottom: 1px solid #dbdbdb;
float:none;
}
.buy-portal h3 {
font-size:20px;
}
.sell-portal h3 {
font-size:20px;
}
/*! Footer */
.footer {
background-color: #49484C;
}
.footer a {
color: #E8E5F2;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
}
.footer ul {
list-style-type: none;
}
please rename class container on your script HTML.
Before:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
After:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
and I also changed a little in class "jumbotron" you, hails like this:
.jumbotron {
background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0);
height: 500px;
text-align: center;
}
Result : Here on jsfiddle
Hope that helps.