For some reason, when I view my webpage on my desktop (normal window width), the columns seem to be fine. However, when I resize my window, some columns tend to be higher than other columns.
Code: (Please resize window for weird columns)
<!DOCTYPE html>
<html>
<head>
<title>Propel WD</title>
<link rel="shortcut icon" href="/Users/Ryan/Downloads/LAPTOP3.JPG">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/animations.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.opacityChange {
position: relative;
-webkit-animation: myfirst 1s linear 0s 1 alternate; /* Chrome, Safari, Opera */
animation: myfirst 1s linear 0s 1 alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
/* Standard syntax */
@keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
.module {
background: white;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
/*animation: widen 10s linear alternate infinite;*/
}
.stripe-1 {
color: white;
background: repeating-linear-gradient(
45deg,
#ED6B61,
#ED6B61 10px,
#F44336 10px,
#F44336 20px
);
}
hr {
height: 0.1px;
background-color: gainsboro;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" class="text-center" style="margin: 40px; font-family: Lato;">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #F44336; border-bottom: none;">
<div class="container">
<div class="navbar-header" style="color: white;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><div style="color: white; font-size: 16px;">Propel WD <span class="glyphicon glyphicon-circle-arrow-up"></span></div></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><div style="color: white; font-size: 13px;"><span class="glyphicon glyphicon-home"></span></div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EAbout.html"><div style="color: white; font-size: 13px;">ABOUT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EServices.html"><div style="color: white; font-size: 13px;">SERVICES</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EPricing.html"><div style="color: white; font-size: 13px;">PRICING</div></a></li>
<li><a href=""file://localhost/Applications/propelOMS%3EOI.html"><div style="color: white; font-size: 13px;">QUESTIONS</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EContact.html"><div style="color: white; font-size: 13px;">CONTACT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3ETC.html" onclick="window.open('file://localhost/Applications/propelOMS%3ETC.html', 'newwindow', 'width=400, height='); return false;"><div style="color: white; font-size: 13px;">TERMS</div></a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center" style="margin-left: -40px; margin-right: -40px; color: white; background-color: #F44336;">
<h1>Propel Web Design <span class="glyphicon glyphicon-circle-arrow-up"></span></h1>
<h3>Where websites matter</h3>
</div>
<hr>
<h2 class="stripe-1" style="padding-top: 30px; padding-bottom: 30px; margin-right: 25%; margin-left: 25%;">Why Choose Us?</h2>
<hr>
<article id="wcu" class="opacityChange">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; padding: 40px;">
<h3 style="letter-spacing: 1px;">
Here at Propel Web Design, we love to make stylish and fancy websites. For prices
as low as £300, we could make a masterpiece! We also have a huge variety
of types of websites! Business websites, Information websites and much more!
Our websites all have SEO, Responsive Design, 10 free stock images. Go ahead!
Make a website with us!
</h3>
</div>
</div>
<hr>
<div class="container">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
<div class="col-sm-4">
<span class="glyphicon glyphicon-gift" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-star" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">AMAZING WEBSITES</h4>
<br>
<p style="font-size: 15px;">
Our brochure websites are made for small companies who want to get
themselves online. We will try to make your website look professional and
adequate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-phone" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-envelope" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">JUST AN EMAIL OR TELEPHONE CALL AWAY</h4>
<br>
<p style="font-size: 15px;" class="ni">
Our blogs are made for people who want to share their day to day life with
the world. We will try to make your website fancy and as personalised as
possible.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-briefcase" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-wrench" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">HARD WORKING</h4>
<br>
<p style="font-size: 15px;">
Our personal websites are for people who want to talk about the recent
trends and other controversial things. We will try to make your website
look clean and well laid out.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-certificate" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">PASSIONATE</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-gbp" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-credit-card" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">AFFORDABLE</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-th" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-sort-by-alphabet" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">ALL YOU NEED</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-signal" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">SEO</h4>
<br>
<p style="font-size: 15px;">
All of our packages include SEO, Search Engine Optimisation. We've got
SEO on the top three browsers in the world. Bing, Yahoo and Google.
This will be useful when it comes to attracting more customers since
people will be able to view your website on any browser!
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-user" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">DOMAIN NAMES</h4>
<br>
<p style="font-size: 15px;" class="ni">
Although our domain names are hosted by 3rd party hosters, we've chosen
the #1 website hosting service in the UK, GoDaddy. We've got a wide
variety of domain names like .com, .uk, .co.uk., .site and many more.
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">HD STOCK IMAGES</h4>
<br>
<p style="font-size: 15px;">
Our HD Stock Images come from Adobe Stock Images. Their library has over
44 million photos so you could be picky with the size and content of the
image. You know what they say! Pictures are worth a thousand words!
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">RESPONSIVE DESIGN</h4>
<br>
<p style="font-size: 15px;">
All of our websites are 100% responsive so that users will also be able
to see your websites no matter how big or small their screen is! From a
IPhone to an IMac, you'll still get to view it.
</p>
</div>
</div>
</div>
</div>
<hr>
</article>
</body>
</html>To clarify, are you referring to the column inconsistencies in the section with "Amazing Websites", "Just an E-Mail or Telephone Call Away", etc.?
If so—from the looks of it, it seems you aren't wrapping each "row" of columns in <div class="row"></div> tags.
For Bootstrap's grid to work optimally, wrap each row of columns in a "row" class, like so (or check out this solution in your context on JSFiddle):
<style>
.box {
margin-top: 20px;
padding: 15px;
border: 2px solid grey;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 box">
<h2>1st Row, 1st Column</h2>
</div>
<div class="col-sm-4 box">
<h2>1st Row, 2nd Column</h2>
</div>
<div class="col-sm-4 box">
<h2>1st Row, 3rd Column</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4 box">
<h2>2nd, 1st Column</h2>
</div>
<div class="col-sm-4 box">
<h2>2nd Row, 2nd Column</h2>
</div>
<div class="col-sm-4 box">
<h2>2nd Row, 3rd Column</h2>
</div>
</div>
</div>