I have 3 columns in a row, each of which has the class col-xs-4 and so they cover up the entire row. Now I need to add border for each of these columns and I don't want them to overlap.
Currently, am using border but there's no spacing between the columns.I want some space between the borders of these columns so they look like they are separated from each other.
I can't use offset because the columns start stacking vertically.
Can this be achieved?
You can use paddings and a child div
.col-xs-4 {
padding: 16px;
}
.col-xs-4 > div {
border: 1px solid black;
padding: 16px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<row>
<div class="col-xs-4">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur nobis cumque aut totam neque provident tempore recusandae vel quis suscipit eum.
</div>
</div>
<div class="col-xs-4">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur nobis cumque aut totam neque provident tempore recusandae vel quis suscipit eum.
</div>
</div>
<div class="col-xs-4">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur nobis cumque aut totam neque provident tempore recusandae vel quis suscipit eum.
</div>
</div>
</row>
I fixed this by reducing the width of col-xs-4 and added a border.
Related
Having a problem in setting the right margin on a web page and using float.
Want all the 3 sections to come in a single row when viewing in desktop and to have right margin at section 3.
https://chawlaji8781.github.io/module2-solution/index.html
https://chawlaji8781.github.io/module2-solution/CSS/style.css
wrap your sections with a div with a class. and use that class to display it as flex. Here's the demo code.
<div class="row">
<section id="s1">
<h2 id="d1">Chicken</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</section>
<section id="s2">
<h2 id="d2">Beef</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</section>
<section id="s3">
<h2 id="d3">Sushi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</section>
</div>
CSS:
.row {
display: flex;
}
because you have to understand how box-sizing property works:
when you give the section a width of 33.3% you may think this meaning 3 * 33.3 = 99.9 so the three sections will be on the same row but you missed the margin of sections that you should take in account
every section have 15px left and 15px right and this mean the 3 sections have 30 * 3 = 90px you should subtract from total width
so the final calculation should be similar to this snippet below :
section {
width: calc((100% - 90px) /3);
}
100% = full width
90px = total margin of the 3 sections
<div class="holder">
<div class="1">
<div class="s1">
<h2 id="d1">Chicken</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</div>
</div>
<div class="2">
<div class="s2">
<h2 id="d2">Beef</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</div>
</div>
<div class="3">
<div class="s3">
<h2 id="d3">Sushi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</div>
</div>
</div>
<-----------------------------------
.holder {
padding-bottom: 6vh;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
try this any errors let me know
I'm trying to make columns in HTML and css without using grids, flexbox or anything fancy. But the heights of individual columns appear to increase as they go from left to right and it also seems like the contents of the third column is taking up more space.
I've tried setting a specific height to the columns but they don't work as well.
#exhibit {
width: 100%;
height: 600px;
}
.col {
width: 33.3%;
font-size: 1.2em;
float: left;
font-family: sans-serif;
overflow: hidden;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
The three columns should have the same height and occupy equal space.
#exhibit {
height: 600px;
display: table;
width: 100%;
}
.col {
font-size: 1.2em;
font-family: sans-serif;
overflow: hidden;
display: table-cell;
background-color: red;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
You have to used display table type. but you will abled to achieved the .col all at same height
I'm trying to create a way to leak an element from it's parent container.
I'm using max-width and margin: auto for the container to center.
The child element has position: relative and uses left + translateX transform to become centered.
The CSS works OK until the page gets scrolling (content height higher than screen height).
This vertical scroll also generates horizontal scrolling.
I was able to hide it using overflow-x: hidden but i really want to know why i'm getting an horizontal scroll?
Maybe is because the transform? CODE BELOW (see in fullscreen):
.leaked {
position: relative;
left: 50%;
transform: translatex(-50%);
width: 100vw;
margin: 0;
overflow: hidden;
}
.container {
padding: 0 20px;
margin: 0 auto;
max-width: 960px;
position: relative;
}
/* EXTRA */
.block {
padding: 20px 0;
background: darkred;
color: white;
}
body {
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
text-align: center;
color: gray;
font-size: 0.8em;
}
.force-scroll {
height: 100vh;
}
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
According to documentation
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they have scaled accordingly.
However, when the value of overflow on the root element is auto, any
scrollbars are assumed not to exist.
So there is no way to without js to get width without scrollbars :(
It's the width on .leaked. I changed the width from 100vw to 100% and the image reduces in size so it now fits in the container.
.leaked {
width: 100%;
//other styles
}
But if you do want the leaked content to go full width you need to change your html structure so .leaked sections are not inside the container, that way it will go full width:
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
</article>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<article class="container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
</article>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<article class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
I have two columns (one with is-half class) that I want to "stack" (one on top of each other) on mobile AND tablet mode.
As from the documentation I have used <div class="columns is-desktop"></div>
But it is not working properly.. On tablet, columns are stacked but the first column, which has a is-half class, remains half sized.
Here's a snippet to illustrate the issue:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns is-desktop">
<div class="column is-half">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
Or a JSFiddle Example
I want the is-half column to be fullwidth on tablet mode.
It is not a bug. That's the expected behaviour.
<div class="columns is-desktop"></div>
has display: block until desktop
#media screen and (min-width:1024px){.columns.is-desktop{display:-webkit-box;display:-ms-flexbox;display:flex}}
.is-half has width: 50%
.column.is-half,.column.is-half-tablet{-webkit-box-flex:0;-ms-flex:none;flex:none;width:50%}
It's like
div {
border: 1px solid;
}
.half {
width: 50%;
}
<div class="half">half</div>
<div>fullwidth</div>
between 768px and 1024px.
Solution
(Don't set .is-half)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
<div class="columns is-desktop">
<div class="column">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
If you want to have other sizes, e.g. for desktop, use .is-x-desktop
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
<div class="columns is-desktop">
<div class="column is-8-desktop">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
Change Class Name is-half to is-half-desktop
<div class="container">
<div class="columns is-desktop">
<div class="column is-half-desktop">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column is-half-desktop">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
https://jsfiddle.net/wtprmwsh/2/
I'm building a simple site with bootstrap columns, but I would like for them to stay with the same height, since as of right now, if the last column in the row is short in height, the next one gets placed below it instead of on the next row to the left. How could I do this?
.col-xs-3 {
border: 1px solid red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
edit: since the snippet isn't showing correctly to show my issue, here is a codepen: http://codepen.io/sgarcia-dev/pen/zqbjBg
edit2: I saw the other threads, but those show how to set them to the same height without needing columns to be responsive. I can't use flexbox for IE reasons, and I need to keep the HTML clean enough so that these columns have more than one column size (col-md-3, col-xs-6, etc). My current solution which for some reason doesn't work is doing this:
.col-sm-3:nth-child(3n):after {
content: "";
display: table;
clear: both;
}
Can someone help?
Placing <div class="clearfix"></div> should fix the issue
<div class="container">
<div class="row ">
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
<div class="clearfix"></div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
From the question and your comments on previous replies, it sounds as if you do not actually want/need equal sizes columns (which would include stuff such as backgrounds, borders extending to the same height for all, which would be rather easy to achieve with flexbox - maybe as nice-to-have in supporting browsers), at least not as the main goal; but you rather just want the "boxes" that flow onto a second (, third, ...) "row" or rather line to all have the y-position of their top edge match that of the bottom edge of the highest column in the previous row.
That is quite easy to achieve, if you forgo bootstrap's floating, and use display:inline-block on the columns instead.
Then of course you will have to eliminate the space between the columns that inline-block brings with it - but that is a well known issue with several possible fixes, see https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - I chose the font-size 0 on the parent element here, but if you need to satisfy older IE you might need to use an absolute font-size for the "re-set" on the columns rather than the rem I used in the example.
.row {
font-size: 0; /* fight white space */
}
.col-md-3,
.col-sm-6 { /* add selectors for more of the col-variants if needed */
border: 1px solid red;
float: none; /* disable floating */
display: inline-block; /* make inline-block instead */
vertical-align: top; /* have top edges of elements on one line align */
font-size: 1.5rem; /* reset font-size */
}
http://codepen.io/anon/pen/ezJQLM
IMHO this solution has a nice benefit/advantage in that you don't need to alter anything regarding bootstrap's column width definitions or wrestle floats into shape using adventurously placed clearfixes.
The reason that you have 1 col getting pushed below the other is becuase you are using the class: col-xs-3 with 5 col's. Bootstrap works off the fact that you can only have an additive total of 12 per "row" on the same "row"
3 * 5 = 15, so you get 1 pushed down to it's own "row, allowing 4 to be on the same row; 3 * 4 = 12.
If you instead use the col-xs-2 class, you will have all on the same "row"; 2 * 5 = 10
Do the following to correct your problem:
.col-xs-2 {
border: 1px solid red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
EDIT PER COMMENTS:
To push the other column to it's own row, place it in another div that has the row class.
<div class="container">
<div class="row ">
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
</div>
<div class="row">
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
.col-sm-3 {
border: 1px solid red;
}