This question already has answers here:
How can I put CSS and HTML code in the same file?
(6 answers)
Is there a way to do css inside an html body? [closed]
(5 answers)
Closed 2 years ago.
I'm doing my personal page for a virtual grad show in lieu of COVID, hence the school passed us a format that we could use, and told us for "security reasons" we could not modify the CSS whatsoever, even if we had access to it. The CSS is as follows.
.twocols {
display: flex;
justify-content: center;
margin: 4vw 8vw 0 8vw;
}
.twocols-spl {
display: flex;
justify-content: center;
margin: 4vw 8vw 0 8vw;
If I don't put in an image in the following code, my text auto centers, but I would like to know if its possible to override the margins manually as I strictly cannot modify the CSS.
<div class="twocols" id="mir">
<img class="left" src="./data/800x800.png" alt="">
<div class="mir_abstract">
<h2>Subtitle 2</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
Just add style="" to the specific HTML tag you want to modify.
You can easily override it.
Just add Another stylesheet on this page after the first one,
Or add a tag,
Or use th attribute style="" in the html,
Or add a JS script which update the style of the element if there is no img.
You can override by in-line Styling CSS and remove important! If you have used it in code.
Related
A have CSS-code:
.hide, .hide + label ~ div {
display: none;
}
.hide:checked + label + div {
display: block;
}
It allows me to manipulate div next to label next to checked input.
It works fine, but is there a way, that I can manipulate div with checked/unchecked that is far away from input?
My div has class "dropdown-menu" and it is not related to input in any way and like 50 lines of code after the input.
Can I connect checked value with my "dropdown-menu" div in any way with CSS?
CSS is limited in terms of how one selected element is able to help select and affect other elements in the DOM. You've highlighted two of the very cool combinators available to use already: the adjacent sibling combinator (+) and the general sibling combinator (~). You're no doubt familiar with the descendant combinator (_) <- that's a space. Finally, there's the child combinator (>).
Of these, the only two that I can imagine would be even potentially helpful are the general sibling combinator (~) and the descendant combinator(_). The other two describe relationships that assume very specific proximity relationships (+, >).
You can do what (I think) you're describing with the general sibling selector (at least you can if your markup structure has the dropdown menu div as a general sibling of the label element above it). I don't think it's likely to be in real life, but (assuming it is) here's a contrived example.
.me-too {
padding: 8px;
background-color: #fafafa;
margin-top: 16px;
margin-bottom: 16px;
}
.hider+label+div {
display: none;
}
.hider:checked+label+div {
display: block;
}
.hider+label~.dropdown-menu {
display: none;
}
.hider:checked+label~.dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 16px;
}
<header>
<input id="my-checkbox" class="hider" name="my-checkbox" type="checkbox">
<label for="my-checkbox">Check me!</label>
<div>I can be hidden and revealed</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div class="me-too dropdown-menu">
<h2>DROPDOWN MENU</h2>
<p>I too can be hidden and revealed!</p>
Link 1
Link 2
Link 3
Link 3
</div>
</header>
Personally, I really appreciate that you're trying to accomplish this using CSS. I think it's always better to use the simplest tool that can get the job done (HTML, CSS, HTML+CSS, or finally HTML+CSS+JS).
But if my contrived example above doesn't mirror your actual use case, you could surely use JavaScript to cover the gap right?
Let me know if I've misunderstood the intent of your question.
There is no way to do that. It would be possible if there were a parent combinator in CSS, but there isn't.
The solution is very simple with JS-code:
Here it is:
<script>
function myFunction() {
var x = document.getElementById("dropdown");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Add this within container in HTML (of into JS-file if you know how to do that).
And add id to whatever block in div you are trying to hide/show.
ID in JS and ID in div should be the same
Also, remember that if you have basic value of display:block - everything works.
But if your basic display:FLEX, or INLINE, or else - you should change 4-th line of code (with BLOCK) to whatever value you need.
Have you tried data attributes?
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
This question already has answers here:
Flexbox not giving equal width to elements
(5 answers)
Closed 1 year ago.
I have just started learning CSS and I was working on a page using flexbox. The problem is that,
I have a container which is display: flex.
I have a left side image
I have a right side long text.
As you can see in the below snippet, the .content is not taking 50% width.
Any help would be appreciated.
Thanks in advance
.container {
display: flex;
}
img {
max-width: 100%;
}
.content {
width: 50%;
}
<div class='container'>
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
<div class='content'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
</div>
</div>
You need to specify the flex property as below.
.container {
display: flex;
}
img, .content {
/* max-width: 100%; */
flex: 1;
width: 50%;
}
<div class='container'>
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
<div class='content'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
</div>
</div>
I have been trying to make a gallery like structure to display divs using flex box although I want the divs displayed in rows of three on each column. This is where my problem lies.So if I have four divs three should be dislayed on the one line and one should drop to the next. However in my case all the divs however many carry on on the one line and never drop.
Here is my HTML code
<div class="container">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
</div>
Here is my CSS code
.container{
display:flex;
justify-content:space-evenly;
align-items:center;
}
.inner{
width:30%;
background:#efefef;
margin-left:1.662%;
margin-right:1.662%;
}
You just need to add the flex-wrap to your flex.
.container{
display:flex;
justify-content:space-evenly;
align-items:center;
flex-wrap: wrap;
}
Since each box is 30% the forth will drop to the next line.
ex. https://jsfiddle.net/pqec64x0/6/
I have some long text that I want to put into 2 columns.
I have a separate semantic element (in this case a table) that I want to appear at the top of the 2nd column.
The table will be the width of one column and fixed height.
The length of the text is unknown.
If the text is short enough that it occupies less height than the table then it should remain entirely within the 1st column.
Is there a way to achieve this without splitting the text between multiple elements and without using javascript?
I've tried floating the table to the right within an element with column-count: 2 but this didn't work because it floats to the right of the column, not the entire container.
I've also tried floating the table to the right outside of the element with column-count: 2, but this didn't work because the text doesn't flow around the table and attempts to display in 2 columns across only part of the width of the container.
I looked at using CSS grid but this doesn't allow for non-rectangular regions.
Absolute positioning won't work as the text will overlap the table.
I tried letting the table go to the bottom of the column and then adding a negative top margin, but this causes it to overlap the text.
Desired result:
Are there any other options?
Pure CSS solutions only please, no javascript.
N.B. This html will be converted to PDF with PrinceXML
EDIT: didn't work in Chrome. Fixed with a transform: translateZ(0); (may repaint the first paragraph or something in Chrome)
It seems to be possible but only because your special element is fixed height (which doesn't happen in reality or let's say on screen. You control how it's printed so OK but… well)
➡️ Codepen
Solution combines:
absolute position for the special element (and fixed height)
padding top on container (thus element doesn't surimpose on another element). There's a lot of room on top of 1st column, alongside the special element.
negative margin on the first paragraph (so the 1st column now appears filled).
CSS3 columns takes care of the total height so we're good.
/* Not normalize'd here */
/* 10rem is the fixed height of the special element. Update values like 11rem, + or -10rem accordingly */
.col-2 {
position: relative;
columns: 2;
width: 40rem;
padding: 11rem 1rem 1rem 1rem;
background-color: lightyellow;
}
.col-2 p:first-of-type {
/* or ".col-2 aside + p, .col-2 p:first-child {}" */
margin-top: -10rem;
background-color: lightblue;
transform: translateZ(0); /* bugfix Chrome paragraph disappeared (some paint problem) */
}
.col-2 aside {
position: absolute;
top: 1rem;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 9rem; /* leaves room for 1rem of margin below */
font-weight: bold;
font-size: 1.5rem;
background-color: tomato;
}
.col-2 + * {
max-width: 60rem;
min-height: 20rem;
padding: 1rem;
background-color: #f5f5f5;
}
<!-- https://stackoverflow.com/questions/48342730/placing-semantic-element-at-top-of-column#48342730 -->
<h1>2 test cases in this pen (scroll)</h1>
<div class="col-2">
<p>Case 1: special element at the end of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<aside>your element</aside>
</div>
<p>Rest of content Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio.</p>
<div class="col-2">
<aside>your element</aside>
<p>Case 2: special element at the beginning of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
</div>
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;
}