Following the TutsPlus Power Up Your Portfolio With Bootstrap tutorial.
Trying to implement a 3 column portfolio with Bootstrap 3's col-sm-4 class , to get something like:
Instead, here is what I get:
And here is what I get when I zoom out:
HTML code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Red Beluga</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid text-center">
<div class="jumbotron">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>Hello, welcome to Red Beluga's lab.</h1>
<p class="lead">
We build simple web apps.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid filterable-portfolio">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="portfolio-title">Filter by:</li>
<li role="presentation" class="active">All</li>
<li role="presentation">Animation</li>
<li role="presentation">Design</li>
<li role="presentation">Photography</li>
<li role="presentation">Web</li>
</ul>
</div>
</div>
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
CSS code:
#import 'main.css';
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
#import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
html{
background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
height: 100%;
background-attachment: fixed;
overflow-y: scroll;
}
body{
background: none;
line-height: 1.5;
color: #F5F5F5;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Abril Fatface', cursive;
margin-top: 0;
}
p {
margin-bottom: 1rem;
}
.navbar-brand, .navbar-nav>li>a{
color: #F5F5F5;
font-weight: bold;
}
.navbar-brand:hover, .navbar-nav>li>a:hover{
color: #F5F5F5;
font-weight: bold;
background: none;
}
.navbar-nav>li>a:after{
content: '/';
margin-left: 30px;
}
.navbar-nav>li:last-child>a:after{
content: '';
}
.navbar-toggle{
background: #111;
}
.navbar-toggle .icon-bar{
background: #F5F5F5;
}
#media (max-width: 768px) {
.navbar-nav>li>a:after{
content: '';
}
.navbar-nav>li>a{
background: #111;
border-radius: 4px;
margin-bottom: 3px;
}
}
.container .jumbotron, .container-fluid .jumbotron{
padding-left: 0;
padding-right: 0;
}
.jumbotron{
background: none;
margin-top: 75px;
margin-bottom: 75px;
}
.jumbotron h1 {
font-size: 120px;
}
.jumbotron .lead {
font-size: 32px;
}
#media (max-width: 992px) {
.jumbotron h1{
font-size: 72px;
}
}
#media (max-width: 768px) {
.jumbotron h1{
font-size: 40px;
}
.jumbotron .lead {
font-size: 20px;
}
}
.portfolio-title{
padding: 10px 15px 10px 0px;
font-weight: bold;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #F5F5F5;
background: #111;
}
.nav-pills a {
color: #F5F5F5;
margin-bottom: 1rem;
}
.nav>li>a:focus, .nav>li>a:hover{
background: none;
}
.portfolio-item {
margin-bottom: 1rem;
}
.portfolio-item img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
border-radius: 4px;
}
.portfolio-item:hover img{
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
.filterable-portfolio{
margin-bottom: 3rem;
}
Any idea what I am doing wrong?
Your problem lies in the styling being applied to the figure tag element by the normalize.css (some additional margins in the variety of 1em for margin-top and 40px for margin-right, causing your content to be wider than Bootstrap's 33.3% width for the col-sm-4 divs). Either switch your figure elements to divs or provide a superseding value to the figure tags that eliminates the behavior applied by normalize. Here's what I mean:
[Edit]
For a better view of the gif, check it out in a different tab. I captured it at a higher resolution than looks good here.
Here's the link to the plnkr I generated from the above code.
The reason AngularJR's answer works is because he didn't just use a CDN of Bootstrap, he also shuffled the order the CSS loads in, by placing Bootstrap's CSS after the normalize.css, making it inherit Bootstrap's last (and superseding).
[/Edit]
you need to wrap col-sm-4 in rows,
change this part and use rows every 3 col-sm-4 as wrappers;
the grid uses as 12th system column, check bootstrap grid
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div>
to:
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
</div><!-- closing first row -->
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div><!-- closing sec row -->
</div>
you need to set your col-sm-4 div's into another col-md-12 div otherwise it will be setting 33.3% of your total page width and make everything look goofy.
The markup for a 3 column layout is:
<div class="row>
<div class="col-md-4">...cat1...</div>
<div class="col-md-4">...cat2...</div>
<div class="col-md-4">...cat3...</div>
</div>
<div class="row>
<div class="col-md-4">...professor puddinpop...</div>
<div class="col-md-4">...colonel snazzypants...</div>
<div class="col-md-4">...the good king snugglewumps...</div>
</div>
<div class="row">
...
</div>
This will ensure you have 3 columns before stacking when the screen becomes small enough.
See the bootstrap docs on grids for more info.
Thibaud Clement, It looks like you may have a issue coming from your custom css.
When I added a cdn Bootstrap css to your code it works fine.
Take a look here at the Fiddle.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Added to this
It looked like your issue may have come from the normalize.cssgoing by another post. Which I thought was onto the right track here. I added a cdn for normalize.cssbut your code still works fine.
As you will see in this updated Fiddle.
Related
I have been trying to create a responsive menu for the mobile browser of my site and it has four links. I have given 25% width for each of them. The problem is, although its logos stay center their titles don't. You can notice for the snippet that the titles are not in the center of their div.
What is the problem here? What am I doing wrong? Can you suggest how can I keep these titles center as well?
this is the current state:
I'm trying to make it something like this:
The snippet:
.menu {
position: fixed;
bottom: 0;
width: 100%;
background-color: #434A54;
color: white;
font-size: 12px;
padding-top: 7px;
}
a.main-link:link,
a.main-link:visited {
background-color: #434A54;
color: white;
text-decoration: none;
display: inline-block;
width: 25%;
}
.logo {
width: 24px;
height: 24px;
margin-left: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container menu">
<div class="row">
<a href="start.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK1
</div>
</a>
<a href="calculator-home.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK222
</div>
</a>
<a href="contact.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK33333
</div>
</a>
<a href="about.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK4444444
</div>
</a>
</div>
</div>
Columns should be direct child of rows.
Add text center class to the columns. Put the anchor tag inside of columns and make it display:block. And the image and menu title should be placed inside the anchor tag.
/*This css is not required. */
img{
width:25px;
height:25px;
}
a.main-link:link,
a.main-link:visited {
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
</div>
</div>
If you change the html code and add the image before the text inside the anchor tag then add text-align: center you'll get the same result
check my code:
.menu {
position: fixed;
bottom: 0;
width: 100%;
background-color: #434A54;
color: white;
font-size: 12px;
padding-top: 7px;
}
.main-link {
text-align: center
}
a.main-link:link,
a.main-link:visited {
background-color: #434A54;
color: white;
text-decoration: none;
display: inline-block;
width: 25%;
}
.logo {
width: 24px;
height: 24px;
margin-left: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container menu">
<div class="row">
<a href="start.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /><br />
<span class="col-3">LINK1
</span>
</a>
<a href="calculator-home.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /> <br>
<span class="col-3">LINK222
</span>
</a>
<a href="contact.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /> <br>
<span class="col-3">LINK33333
</span>
</a>
<a href="about.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /><br />
<span class="col-3">LINK4444444
</span>
</a>
</div>
</div>
I've been working on a website using Bootstrap 4 where there are three images inside a .row div. The problem I'm having, however, is that I want all the images to have the same height, so I created my own class where I set height: 20% and width: auto The images look exactly how I want them to, however, for each image a certain amount of pixels are added under that div and it sets a huge gap between the section that has the images and the section that follows it. I was wondering what would be a way to avoid this from happening since I don't want to keep that gap between both sections. Here's a fiddle with what I'm talking about https://jsfiddle.net/wxg51v5x/ (Comment out the images to see the difference in action). Thanks!
EDIT: Included the code itself.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: auto;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
The problem was coming from your program-logo class and the large images.
I used the img-fluid class for the images as well as the px-5 class for the third image and also re-arranged things a little bit by using the container class instead of container-fluid and nesting images into their own row-column pairs for easier manipulation using Bootstrap 4 native classes alone (without any custom css).
Also note: I added the background color classes (bg-warning and bg-secondary) just to see what's happening and commented out some your other stuff that was unnecessary in my option. Feel free to adjust that as needed.
I only dealt with the upper section and the spacing underneath because that was your question. But you might want to do some adjustments for the bottom section because that container-fluid doesn't make it look good on wide 4K screens.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container bg-warning" id="programs">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<!--
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
-->
<h3 class="font-heavy mt-3">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/2%20CITE_CITE%20Logo%20C.png" alt="Caribbeans In Tech + Entrepreneurship" />
</div>
</div>
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 offset-2 offset-md-1 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/bwn4.png" alt="Build With, Not For" />
</div>
</div>
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid px-5" src="https://illicitmind.com/static/img/Gsd-Logo.png" alt="Get Shit Done" />
</div>
</div>
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
<!-- </div>-->
</div>
<div class="container-fluid bg-secondary" id="formula">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
<!-- </div>-->
</div>
The space you are talking about is coming because you use .program-logo width:auto; i changed the property and the space is gone i did it in below code you should try it.
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 col-sm-12">
<img height="20%" width="auto" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: 40%;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
I'm trying to create a div which contains a text box with 3 columns with text and images below them. like in the first image I have attached. Including the lines that divide the and if possible the small question marks as well!
Currently this is where I am in image 2,
I have attached a JSFiddle file however it does not contain the images as they are not online:
https://jsfiddle.net/5xzg78je/
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="box">
<img src="iphone.png">
<div class="row">
<div class="column">How many would you like to insure <img src="10.png" class="textimage">
<br> Total value when new <img src="10000.png" class="textimage"><br> Would you like instant replacement <img src="replacement.png" class="textimage">
</div>
</div>
</div>
</div>
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height: 40px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
Try below one.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<style>
.box p i {position: absolute;padding-left: 5px;}
.box img {margin:0 auto;}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I know this post is old, but here is a better solution.
Html:
<table>
<tr class="v-line">
//Content
</tr>
<tr class="v-line">
//Content
</tr>
<tr>
//Content
</tr>
</table>
CSS:
.v-line {
padding-right: 2em;
border-right: 1px solid rgb(185, 185, 185);
}
The v-line class is a bit dirty, but this is easy and basic HTML code.
I have a page where I'd like to have a row of circular images with text on them that can serve as links. I've figured out how to get this to work for the general case of a full sized webpage, but when I resize the width of the page, the text doesn't scale with the image because I have to use absolute positions. Here's the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
</div>
</div>
</body>
</html>
Here's the main.css page...
body {
max-width: 900px;
margin: 0 auto;
}
.container {
width: 100%;
}
.button-pic {
opacity: 0.4;
position: relative;
}
.button-caption {
text-align: center;
position: absolute;
top: 87px;
left: 85px;
}
I'd like to find a way to not have to set the top and left positions of the button-caption since not all of my labels will be the same length. Anyone have advice to offer?
If you want your text position to remain consistent to the image you'll need to use percentages instead of setting a fixed amount of pixels for the position since the images are responsive.
See working Snippet.
.content {
max-width: 900px;
margin: auto;
}
.button-pic {
opacity: 0.4;
position: relative;
margin: auto;
}
.button-caption {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Really Very Pretty Long Label for a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">A Button</span>
</a>
</div>
</div>
</div>
</div>
I am trying to apply background image to cover whole page. Could someone tell me what I did wrong? My background image does not cover the entire page. Here is the page:
http://codepen.io/aitruong/pen/mVmKYR
.my-photo{
margin-top: 20px;
}
p{
padding-top: 40px;
}
hr{
width: 200px;
}
.navbar{
margin-left:128px;
margin-right: 128px;
}
.social-icon{
margin-left:350px;
margin-top:40px;
}
.text{
margin-left: 365px;
margin-top: 50px;
font-size: 40px;
font-family:Tangerine;
}
#language-text{
font-family:Tangerine;
font-size: 35px;
margin-left: 300px;
padding-top: 0px;
}
i{
color: #e67200;
}
#android-app {
margin-left : 90px;
}
footer p,a{
margin-left: 0px;
color:#666600
}
#background{
}
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p></div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div><br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
</div>
</div>
</body>
you probably need this in addition to your existing CSS:
body { background-size: cover; }
There are two mistakes in your code:
body { background-size: cover; }
Is missing. But in addition you will need to put your section3 element inside of the background div. Otherwise the background will stop right before section 3
</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->
Try applying this:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: intial;
}
Set your background like this
background: #ffffff url(bg.jpg) repeat;
for example for the body, set your css
body { background: #ffffff url(your_bg.jpg) repeat; }
The structure of the HTML document is also invalid. Use the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Ai Truong Personal's Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#css").load(function(evt){
$(this).fadeIn();
});
$("#html").load(function(evt){
$(this).fadeIn("slow");
});
$("#js").load(function(evt){
$(this).fadeIn(5000);
});
$("#python").load(function(evt){
$(this).fadeIn(4000);
});
$("#java").load(function(evt){
$(this).fadeIn(2000);
});
});
</script>
<style>
body {
position: relative;
font-family: Open Sans;
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
#section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
#section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10">
<p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p>
</div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
<br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div>
<br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p > Theme Made By Ai Truong © 2016</p>
</footer>
</body>
</html>
Replace your following CSS:
#background{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}
With:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
Tryed with:
#ImageBackground {
background-size: cover;
Width: 100%;
Height: auto;
}
Else you can try with:
#ImageBackground {
Width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}