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>
Related
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;
}
}
I'm using Bootstrap 4 and trying to have columns which are the same height (which I thought Bootstrap did by default).
This is my markup:
<div class="row">
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
</div>
</div>
And the result is this:
I'd like the purple headings to align, as well as the columns themselves.
Here is the CSS I'm using:
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
.table-text {
padding:10px;
background-color: white !important;
}
Here's a Pen: https://codepen.io/anon/pen/ZxeLpO
Edit:
Since you want both, the titles AND the body text parts to be the same height while also making sure that they are responsive, you can use the re-ordering classes in combination with the h-100 class (height:100%) to achieve the desired effect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
</style>
<div class="container bg-light p-3">
<div class="row">
<div class="col-md-4">
<div class="table-heading h-100">
Title1 Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-1">
<div class="bg-white h-100 px-3">
Body1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title2 Long, long, veeery long! Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-2">
<div class="bg-white h-100 px-3">
Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title3 Short Lorem
</div>
</div>
<div class="col-md-4 order-md-3">
<div class="bg-white h-100 px-3">
Body3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
</div>
</div>
The classes like order-md-1 etc. only kick in on screens that are medium (md) or larger. In this case here, it has the effect of the body part columns being pushed what looks like the next row. While on smaller screens, no re-ordering happens and therefore, on smaller screens, the columns appear in the same order as they are in the HTML.
If you add h-100 as a class to the divs with col-md-4 as a class then it will behave as you expect.
h-100 is the bootstrap4 utility class to set the height to 100%, which will make all the columns have a height equal to the row they all reside in.
<div class="col-md-4 h-100">
...
</div>
Update, you can add height: 100% to the css class .table-text to fill the empty space.
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**
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>
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