I'm trying to create a script that will match div ids that scroll into view with the corresponding children in a gallery. I don't want to have to create individual scrollTop codes for each div id—so needing some kind of variable for the index of each div id? I've struggled to find anything close online.
This is the simple scrollTop code I am using as an example. When the "in-view" class is applied, the corresponding gallery items change their opacity.
<script>
$(function(){
$(document).scroll(function(){
if($(this).scrollTop() >= $("#item-1").offset().top - 250) {
$(".sticky-gallery .image-item:nth-child(1)").addClass("in-view");
} else {
$(".sticky-gallery .image-item:nth-child(1)").removeClass("in-view");
}
});
});
</script>
I'm hoping there's a way to create something that can flexibly work for #item-1 with nth-child(1), #item-2 with nth-child(2), etc...
Thank you for any guidance.
I think you can do this very simply by pairing off an array of the div elements with an array of the gallery elements. See the code below for a basic example.
This satisfies the requirements:
matching scrolling divs with gallery items
changing gallery item's styling when matching div in view
no ids required on divs, and indeed no ids equired on gallery items
var sections;
var galleryItems;
function getViewScrollingElements() {
sections = document.getElementsByClassName("section");
galleryItems = document.getElementsByClassName("item");
// Do first check before a scroll could have occured
checkInView();
}
function checkInView () {
var boundingRect;
for ( var i = 0; i < sections.length; i++ ) {
// Get the extremities of the div
boundingRect = sections[i].getBoundingClientRect();
// Are the div's extremities in view
if ( boundingRect.top < window.innerHeight && boundingRect.bottom >= 0 ) {
galleryItems[i].style.opacity = "1";
} else {
galleryItems[i].style.opacity = "0.2";
}
}
}
/* The gallery */
.gallery {
position: fixed;
top: 2vh;
background: none;
border: 2px solid red;
}
.item {
opacity: 0.2;
display: inline-block;
border: 2px solid black;
padding: 2px;
margin: 2px;
}
/* The scrolling items */
.section {
height: 40vh;
}
/* Make sections stand out.*/
.scroll_container > div:nth-of-type(odd).section {
background: pink;
}
.scroll_container > div:nth-of-type(even).section {
background: wheat;
}
<body onLoad="getViewScrollingElements()" onScroll="checkInView()">
<div class="gallery">
<div class="item">
<p>Item 1</p>
</div>
<div class="item">
<p>Item 2</p>
</div>
<div class="item">
<p>Item 3</p>
</div>
<div class="item">
<p>Item 4</p>
</div>
<div class="item">
<p>Item 5</p>
</div>
<div class="item">
<p>Item 6</p>
</div>
<div class="item">
<p>Item 7</p>
</div>
<div class="item">
<p>Item 8</p>
</div>
<div class="item">
<p>Item 9</p>
</div>
<div class="item">
<p>Item 10</p>
</div>
<div class="item">
<p>Item 11</p>
</div>
<div class="item">
<p>Item 12</p>
</div>
<div class="item">
<p>Item 13</p>
</div>
<div class="item">
<p>Item 14</p>
</div>
<div class="item">
<p>Item 15</p>
</div>
<div class="item">
<p>Item 16</p>
</div>
<div class="item">
<p>Item 17</p>
</div>
<div class="item">
<p>Item 18</p>
</div>
</div>
<div class="scroll_container">
<div class="section">
<p>Section 1</p>
</div>
<div class="section">
<p>Section 2</p>
</div>
<div class="section">
<p>Section 3</p>
</div>
<div class="section">
<p>Section 4</p>
</div>
<div class="section">
<p>Section 5</p>
</div>
<div class="section">
<p>Section 6</p>
</div>
<div class="section">
<p>Section 7</p>
</div>
<div class="section">
<p>Section 8</p>
</div>
<div class="section">
<p>Section 9</p>
</div>
<div class="section">
<p>Section 10</p>
</div>
<div class="section">
<p>Section 11</p>
</div>
<div class="section">
<p>Section 12</p>
</div>
<div class="section">
<p>Section 13</p>
</div>
<div class="section">
<p>Section 14</p>
</div>
<div class="section">
<p>Section 15</p>
</div>
<div class="section">
<p>Section 16</p>
</div>
<div class="section">
<p>Section 17</p>
</div>
<div class="section">
<p>Section 18</p>
</div>
</div>
</body>
Related
I am creating a new react website while I am trying to create cards on the home page after 100vh of height the background color is not showing up?
.Home {
background: #121212;
color: #b9b9b9;
height: 100vh;
width: 100%;
}
<div className="Home">
<TopBar />
<SearchBar />
<div className="container">
<div className="row">
<div className="column">
<div className="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div className="column">
<div className="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div className="column">
<div className="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div className="column">
<div className="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
Here is the image of this, please help me solve this problem
The body of the index.html has a margin of 8px.
Add this to your main stylesheet:
body {
margin: 0;
}
I can't see the image, but I think this is the problem.
If the "Home" component has a parent with flex or inline display, and the background is not going to move (i.e. changing your card with an animation.)
You can set the .Home style like this:
.Home{
position: fixed;
top: 0;
left: 0;
background: #121212;
color: #b9b9b9;
width: 100vw; //Remember to use 100vw instead of 100% for the width
min-height: 100vh;
}
Easy way to achive this is setting body and html to height: 100vh.
Also I changed className instead of class since this question is not related with react.js.
body, html {
background-color: #121212;
height: 100vh;
}
.Home {
color: #b9b9b9;
width: 100%;
}
<div class="Home">
<TopBar />
<SearchBar />
<div class="container">
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
I'm trying to get the divs always be centered even after one div drops to the bottom if window size is adjusted. So basically if there are 5 divs and one drops to the bottom after window size reached a certain point, so the remaining 4 divs would still be centered. If possible it would be better if the one dropped wouldn't center but be on the left.
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
}
.item {
width: 300px;
height: 300px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
How the result should look
Use CSS Grid Layout
CSS Grid was like made for this purpose. In the following snippet, I have removed some of your lines and resized the children. But you need to pay attention to the three lines of code added to .item-holder.
I have also made the holder resizable, so you can play with it.
.item-holder {
width: 95%;
height: 80%;
background-color: teal;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
/* Following code makes the element resizable*/
resize: horizontal;
overflow: auto;
}
.item {
width: 100px;
height: 50px;
background-color: black;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
Further Reading
See CSS Grid Layout on MDN
Learn CSS Grid Layout on freeCodeCamp.org
See CSS Grid Layout: Create flexible layouts using auto-fill on freeCodeCamp.org
You can make the .item-holder a flexbox
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
display: flex;
flex-flow: row wrap;
}
.item {
width: 100px;
height: 100px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
My markup looks like bellow:
<div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 2</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 2</p>
</div>
</div>
I'm trying to use the first-of-type selector to hide the first h4 tag or each combined selector .title.blue and .title.green.
I think this isn't working because the elements aren't siblings. Is there a way to still use first-of-type?
There's a pen as an example here
h4.title.blue:first-of-type {
display: none;
}
<div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 2</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 2</p>
</div>
</div>
To hide the first blue, and the first green one you should edit both your html and CSS. Take a look at the example below:
h4.title:first-child {
display: none;
}
<div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 2</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 2</p>
</div>
</div>
In this first example you can see that with the first-child selector each <h4> tag dissapears. This happens because they aren't on the same level. See the written example below:
- container
- title container
- h4
- </title container
- </container
- container
- title container
- h4
- </title container
- </container>
- container
- title container
- h4
- </title container
- </container>
- container
- title container
- h4
- </title container
- </container>
as you can see each <h4> tag is in a new container. So if i would use CSS like the following:
.container .title-container h4.title:first-child {
display: none;
}
it wouldn't display the first <h4> tag of each container. Since every container only has one they'll all dissapear.
As a solution try the following:
.container .title-container h4.title:first-child {
display: none;
}
<div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue 1</h4>
<p>Something blue no 1</p>
<h4 class="title blue">blue 2</h4>
<p>Something blue no 2</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green 1</h4>
<p>Something green no 1</p>
<h4 class="title green">green 2</h4>
<p>Something green no 2</p>
</div>
</div>
Hope this helps!
h4.title:first-of-type {
display: none;
}
<div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 2</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 2</p>
</div>
</div>
You should update css
h4.title:first-of-type {
display: none;
}
I'm trying to use the first-of-type selector to hide the first h4 tag
or each combined selector .title.blue and .title.green.
You're almost there.
You need to use :nth-of-type on an element higher up the DOM.
Working Example:
div > div:nth-of-type(odd) > div h4 {
display: none;
}
<div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title blue">blue</h4>
</div>
<p>Something blue no 2</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 1</p>
</div>
<div class="container">
<div class="title-container">
<h4 class="title green">green</h4>
</div>
<p>Something green no 2</p>
</div>
</div>
I found a different way to do this in the end. I wasn't able to change any markup but I could move CSS classes around.
I used .container > .class-to-hide ~ .class-to-hide as my selector. This selected all but the first elements of .class-to-hide.
Here's a pen showing that
I am studying bootstrap from this online tutorial. In Creating Multi-Column Layouts with Bootstrap 3 Grid System section they say:
If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.
I tried giving different heights to columns within a row. I found that that I do not need .clearfix, because the layout is not breaking. Applying .clearfix or not appplying it doesn't make any difference to the layout.
Without `.clearfix:
#import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Box 1</p>
</div>
<div class="col-md-4">
<p>Box 2</p>
</div>
<div class="col-md-4">
<p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
</div>
<!-- <div class="clearfix visible-md-block"></div> -->
<div class="col-md-4">
<p>Box 4</p>
</div>
<div class="col-md-4">
<p>Box 5</p>
</div>
<div class="col-md-4">
<p>Box 6</p>
</div>
<!-- <div class="clearfix visible-md-block"></div> -->
<div class="col-md-4">
<p>Box 7</p>
</div>
<div class="col-md-4">
<p>Box 8</p>
</div>
<div class="col-md-4">
<p>Box 9</p>
</div>
<!-- <div class="clearfix visible-md-block"></div> -->
<div class="col-md-4">
<p>Box 10</p>
</div>
<div class="col-md-4">
<p>Box 11</p>
</div>
<div class="col-md-4">
<p>Box 12</p>
</div>
</div>
</div>
With .clearfix:
#import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Box 1</p>
</div>
<div class="col-md-4">
<p>Box 2</p>
</div>
<div class="col-md-4">
<p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 4</p>
</div>
<div class="col-md-4">
<p>Box 5</p>
</div>
<div class="col-md-4">
<p>Box 6</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 7</p>
</div>
<div class="col-md-4">
<p>Box 8</p>
</div>
<div class="col-md-4">
<p>Box 9</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 10</p>
</div>
<div class="col-md-4">
<p>Box 11</p>
</div>
<div class="col-md-4">
<p>Box 12</p>
</div>
</div>
</div>
So, why use .clearfix if doesn't make any difference?
Bootstrap's own documentation gives a good example of why in its Responsive Column Resets section:
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
This is what the example markup they use looks like with the .clearfix class in place:
This is what it looks like without it:
I am trying to create a bootstrap app in my project.
In my example, I want 3 yellow columns width to match the 3 green columns width. How do I do it?
html:
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div id="wrapper1">
<div class="row">
<div class="first-table col-xs-3">
title-col-1
</div>
<div class="first-table col-xs-3">
title-col-2
</div>
<div class="first-table col-xs-3">
title-col-3
</div>
</div>
</div>
<div class="row">
<div id="wrapper" class="col-xs-9">
<div class="row">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<p>second </p>
</div>
</div>
</div>
CSS
#main{
background-color:red;
height:300px;
}
#second{
background-color:blue;
}
.first-table{
background-color:green;
border:solid 1px black;
}
#wrapper{
display:table;
width:100%;
position:absolute;
}
#col1, #col2, #col3{
background:yellow;
border:solid 1px black;
}
JS Fiddle.
http://jsfiddle.net/a1zpb8su/2/
Thanks for the help!
Make a CSS class that you can set specific elements with one common width. This will give you total control over which elements will have the same width.
HTML:
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div id="wrapper1">
<div class="row">
<div class="first-table col-xs-3 match-width">
title-col-1
</div>
<div class="first-table col-xs-3 match-width">
title-col-2
</div>
<div class="first-table col-xs-3 match-width">
title-col-3
</div>
</div>
</div>
<div class="row">
<div id="wrapper" class="col-xs-9">
<div class="row">
<div id="col1" class="col-xs-3 match-width">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3 match-width">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3 match-width">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<p>second </p>
</div>
</div>
</div>
CSS:
.match-width {
width: 100px;
}
Working Example
Here it is:
You need make columns on right place, and also rows need placed correctly. Bootstrap on wrapping use a class name `container.
Also you need use structure:
<div class="row">
<div class="col-xs-12">
<div class="row">
If on parent col is children cols, you need wrap it intro row class.
http://jsfiddle.net/a1zpb8su/24/
There really is not much of a need to have nested rows. We can just remove those, the unused classes and id's. Then place second in the first row, and make it a div other than p so it takes the same space has your header. Also for the same width you want to set both to col-xs-8, other than col-xs-8 and col-xs-9
Here are the changes: Fiddle here
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div>
<div class="first-table col-xs-3">
title-col-1
</div>
<div class="first-table col-xs-3">
title-col-2
</div>
<div class="first-table col-xs-3">
title-col-3
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<div>second </div>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
You had your second row inside your first; they were nested. you also had one col set to col-xs-8 and the other set to col-xs-9. I made them both col-xs-8 to work with col-xs-4
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div id="wrapper1">
<div class="row">
<div class="first-table col-xs-3">
title-col-1
</div>
<div class="first-table col-xs-3">
title-col-2
</div>
<div class="first-table col-xs-3">
title-col-3
</div>
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<p>second </p>
</div>
</div>
<!-- moved this row out of the other -->
<div class="row">
<div id="wrapper" class="col-xs-8">
<div class="row">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: If you want to keep them nested, use this
<div id="main">
<div class="col-xs-8">
<div class="row">
<div class="first-table col-xs-3">title-col-1</div>
<div class="first-table col-xs-3">title-col-2</div>
<div class="first-table col-xs-3">title-col-3</div>
</div>
<div class="row">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
<div class="col-xs-4">
<p>second </p>
</div>
</div>