Using bootstrap product slider in WordPress - wordpress

I'm trying to make a loop, but the result is not correct.
Here is the full code for the slider: gist.github.com
<div class="container">
<div class="row">
<div class="well">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide11">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide12">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide13">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide14">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide21">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide22">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide23">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide24">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide31">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide32">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide33">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide34">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p>12,99 € Wishlist</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div><!-- End Carousel -->
</div><!-- End Well -->
</div>

Related

Image pushed/float to the edge

unfortunately I have a problem moving the image to the edge of the screen.
<section class="hero-main">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="hero-main__container">
<div class="hero-main__header">
<h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
</div>
<div class="hero-main__text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<img src="images/map-flag.png" style="margin-left: 107px" class="" alt="">
</div>
</div>
</div>
The effect I want to achieve is presented in the screenshot.
Unfortunately, my code does not fit the photo to the edge, if I push it it is not responsive.

May be it will help v2:
<img src="images/map-flag.png" style="max-width: calc(100% - 107px); margin-left:107px; " class="" alt="">
or may be
<section class="hero-main" style="background-image: url('images/map-flag.png'); background-position: 100% 0; background-size: 50%; background-repeat: no-repeat;" >
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="hero-main__container">
<div class="hero-main__header">
<h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
</div>
<div class="hero-main__text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</section>

How to make notification box float in the center

Using Bulma css framework, I try to make the notification box popup at about the center of the page, without interrupting existing data (it is a notification that pops for 3 seconds and then it should disappear). For example: 2 images on top of each other(snippet 1), and I want the notification box to float on top of them without pushing any content(snippet 2)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
<div class="notification is-primary">
<button class="delete"></button> Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>

Simply give the notification position: absolute along with a z-index which is higher than the element you want it to sit on top of (1 will likely work fine):
.notification.is-primary {
position: absolute;
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
<div class="notification is-primary">
<button class="delete"></button> Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>

I created a CSS rule like:
.top-of-the-world{
position: absolute !important;
z-index: 100 !important;
}
That way I do not alter Bulma's rules.
Then I added the class top-of-the-world to my notification
.notification.top-of-the-world

How to Put 4 images aside each other with text beneath each of them?

I want to accomplish this with only HTML and CSS
Another example from bbc.com
I want them to be separated from each other.
this is the code I made so far
.newsitems {
display : inline-block;
}
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

Unfortunately I can't post code now, but it's simple
Just display all divs as block
Add the image inside the div, then
Write the text inside the div as well
Then in CSS just add something like this :
.divname{
position:absolute;
}
Then set the proper value(px) of right/left, top/bottom positions , and set a width and height

You can use flexbox to make it easly and keep it responsive:
main{
display:flex;
flex-flow:row wrap;
}
.newsitems{
width:200px;
}
<main>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
</main>

you have two options either you use flex or you can also use the bootstrap class to acheive this (which is basically made up of flex)
1 : Bootstrap code
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
</div>
2: use pure css/ SCSS (using flex)
<div class="main-container">
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
</div>
SCSS
.main-container{
display:flex;
justify-content:center;
width:100%;
align-items:center;
flex-flow:row wrap;
}
.item-container
{
display:flex;
width:20%;
flex-flow:column nowrap;
img
{
width:100%;
height:200px;
}
div
{
font-size:12px;
}
}

bootstrap column will not extend to the bottom of the page

I would like to know how I can get the sidebar on this bootstrap page to extend all the way to the bottom like the main column on the right. height:vh doesn't seem to work. Neither does height:100%.
Is this a bug in Bootstrap? I have never encountered this problem before. The sidebar has less content than the main sections, but I need for it to extend all the way to the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column Test</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="border:2px solid red; margin:20px 0 20px 0; height:100%">
<div class="row" style="border:2px solid black; height:100%">
<!-- left-side (sidebar) -->
<div class="col-xs-3" style="background-color: orange; height:100vh;">
<div class="sidebar-container" style="border: 1px solid blue;">
<h5 class="grey">TITLE 1</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 2</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 3</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
</div>
<!-- /leftside (sidebar) -->
<!--right side (content)-->
<div class="col-xs-9" style="background-color:pink; height:100%;">
<div class=" row advertisement-container">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<h3 class="col-md-12">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h3>
<div class="cme">
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-1">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-2">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-3">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-4">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-5">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-6">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-7">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-8">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-9">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-10">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-11">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-12">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-13">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-14">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-15">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-16">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-17">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-18">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
<div class=" row advertisement-container margin-bottom-20">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<!--/right side-->
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>**strong text**

Bootstrap Nav bar css

Im having trouble getting my page aligned properly. It seems no matter what i do none of the rows align the way i would like them to. either the images are off misaligned from the main img or captions below those images don't line up properly.
I would like the arrows to line up at the same level as the services/faq/contact and the paragraphs below those to be aligned to the left. But it seems i cant achieve this without playing with margins in 10 different places.
http://www.bootply.com/bilUlNXdnE
http://i.imgur.com/vnE3N3U.jpg

Well, this is not just an answer but I just want to guide you through the right direction..
I see you created separate div for Headers, arrows and descriptions. I don't think that is the right way to do it. Rather, you can make one div for columns (including header, image, arrows and description)..
Your Code :
<div class="row " id="icons">
<div class="col-md-4">
<img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
</div><!--/#Spray-->
<div class="col-md-4">
<img src="img/vacuum.gif" class="image-responsive " id="vacuum" width="300" alt="" height="240">
</div><!--/#Vacuum-->
<div class="col-md-4">
<img src="img/mop.gif" class="image-responsive " id="mop" alt="" width="300" height="240">
</div><!--/#Mop-->
</div>
<div class="row" id="captions">
<div class="col-md-4">
<h3>Services</h3>
</div>
<div class="col-md-4">
<h3>FAQ</h3>
</div>
<div class="col-md-4">
<h3>Contact</h3>
</div>
</div>
<div class="row" id="arrows">
<div class="col-md-4">
<img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">
</div>
<div class="col-md-4">
<img src="img/arrow8.gif" class="image-responsive" id="arrow2" alt="" width="18" height="18">
</div>
<div class="col-md-4">
<img src="img/arrow8.gif" class="image-responsive" id="arrow3" alt="" width="18" height="18">
</div>
</div>
<div class="row" id="blurbs">
<div class="col-md-4" id="blurb1">
<div class="services"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
</div><!--/#Spray-->
<div class="col-md-4" id="blurb2">
<div class="FAQ"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
</div><!--/#Vacuum-->
<div class="col-md-4" id="blurb3">
<div class="contact"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
</div><!--/#Mop-->
</div>
This is a loose coupling between elements that are in same context (e.g. Header, Image, description etc.).
I would recommend you to code something like this -
<div class="col-md-4">
<img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
<div class="row">
<div class="col-md-8">
<h3>FAQ</h3>
</div>
<div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18"> </div>
</div>
<div class="services">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<!--/#Column1-->
<div class="col-md-4">
<img src="img/vacuum.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
<div class="row">
<div class="col-md-8">
<h3>FAQ</h3>
</div>
<div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18"> </div>
</div>
<div class="FAQ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<!--/#Column2-->
<div class="col-md-4">
<img src="img/mop.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
<div class="row">
<div class="col-md-8">
<h3>FAQ</h3>
</div>
<div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18"> </div>
</div>
<div class="contact">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<!--/#Column3-->
This way, you don't have to play much with margin and stuff..
Edited example : http://www.bootply.com/ZnylDYHd6x

Resources