I'm just getting started with Bootstrap. Below is a snapshot of my page.
My CSS is
.snippet img{
width: 150px;
max-width: 100%;
height:auto;
}
#media(max-width: 767px) {
.snippet img{
width:100px;
float: right;
max-width: 100px;
height: auto;
margin-left: 10px;
margin-right: 10px;
}
}
And here is my HTML:
<h2>About the venue</h2>
<div class="media-body snippet" >
<a class="pull-right" href="venue.php">
<img src="images/venue.jpg" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
I want the image to be hanging like that on big screen. However, on small devices I would like to get the text to wrap around the image. How can I do that?
Any help would be appreciated!
why you dont use this? its also smarter ;)
http://getbootstrap.com/components/#thumbnails-custom-content
EDIT
include code from bootstrap doc
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
YOu can try this
<style>
.snippet {width: 250px;}
.snippet img{ width: 150px; height:auto; float: left; }
</style>
</head>
<body>
<div class="media-body" >
<div class="snippet">
<a class="pull-right" href="venue.php"><img src="http://i.stack.imgur.com/Fa34B.png" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
</div>
Try this
<div style="width: 150px;">
<img src="http://i.stack.imgur.com/Fa34B.png" align="left" width="100" height="100"> This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text
</div>
I just use the following: float is all that's needed, a bit of padding for visuals:
<div class="float-right pl-3 pb-3">
<img src="https://i.pinimg.com/474x/4a/c7/3b/4ac73b5c8ef5d397ab535ac1631642a7.jpg" class="shadow img-fluid">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Add this line of css code
display:inline;
You have to add the following class to your html code: "img-responsive pull-left"
For example:
<img src="IMG/img.jpg" alt="about image" class="img-rounded img-responsive pull-left">
Related
I'm trying to work my flex and i used flex wrap because i want 3 blocks when it's a laptop and 1 block when it's a phone. But for the moment, nothing moove, i have 3 block with my laptop and also with my phone.
I thought it was flexWrap to make the block pass to the other line but it doesn't works
i tried to don't used bootstrap for this one so i'm a little bit lost without !
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
.flexbox {
margin-top: 10%;
display: flex;
flex-wrap: wrap;
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
width: fit-content;
flex: 1;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
flex-wrap: wrap; does not guarantee that it will be one column on mobile phone, because it wraps the element if it reaches its minimum width. so on bigger phones you may have two columns.
Solution 1
(it depends on screen size, so maybe a bigger phone will have two columns per row) Check the snippet:
.flexbox {
margin-top: 10%;
display: flex;
flex-wrap: wrap;
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
min-width:200px;
white-space:wrap;
max-width:100%;
width:0;
flex: 1 1 0;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
Solution 2
This guarantees that it will be one column per row on devices smaller that 800px width.
you can change the number to suit your needs.
.flexbox {
margin-top: 10%;
display: flex;
/*flex-wrap: wrap;*/
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
width: fit-content;
flex: 1;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
#media screen and (max-width:800px){/*change 800 to your break point */
.flexbox{
flex-direction:column;
}
}
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
You need to add media query for mobile device view.
#media screen and (max-width: 767px) {
.flexbox {flex-direction: column;}
}
Note:you can change max width according your design or breakpoint.
I'm having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.
I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.
Is this possible in some way?
I made a Codepen to illustrate the problem:
http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
#media only screen and (min-width: 480px) {
.row.row-flex-wrapper::before,
.row.row-flex-wrapper::after {
content: none !important;
}
.row.row-flex-wrapper::after {
clear: none;
}
.row.row-flex-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.row.row-flex-wrapper .column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: none;
border: 1px solid orange;
}
.row.row-flex-wrapper .column > .block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
.row.row-flex-wrapper .column > .block > .block-list {
flex: 1 0 auto;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.row.row-flex-wrapper .column > .block > h2 {}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container .row .column {
width: 50%;
}
}
<div class="container">
<div class="row row-flex-wrapper">
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title 1</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Some link
</li>
<li>Some link 2
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very long title which is actually toooo long...</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Very nice link
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>This block is cool!</h2>
<div class="block-list">
<p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy
text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another link
</li>
<li>Check this item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title Block</h2>
<div class="block-list">
<p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard
dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Buttonssssss</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very very very very very very very long title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button to item
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is not possible with flexbox or CSS, in general.
An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".
Here are a few notes to keep in mind:
Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.
Your question:
I want all the h2 headings of the row to be the same height. Is this possible in some way?
Not with CSS. Because the h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.
Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.
The align-self property can be used on individual flex items to override align-items, which can break the equal height feature.
By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.
This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container
More details:
Equal height rows in a flex container
How to disable equal height columns in Flexbox?
Duplicate posts:
How to get header from cards or similar to have the same height with flex box?
CSS - How to have children in different parents the same height?
Positioning nested grid items in a higher level container (a subgrid function)
Align child elements of different blocks
CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
Aligning the child elements of different parent containers
Use flexbox display to align items within a row wrapper
I worked out a jQuery solution based on your example.
Add the class "eh" (equal heights) to each parent element for which you want to align some of the (sub) children, and a data-eh element containing the selectors for the child elements.
<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>
and then use this function:
$('.eh').each(function(){
var $this = $(this);
var equalHeightSelectors = $this.data('eh');
$.each(equalHeightSelectors, function( index, value ) {
var min_height = 0;
var $children = $this.find(value);
$children.each(function(){
var $el = $(this);
if($el.height() > min_height){
min_height = $el.height();
}
});
$children.height(min_height);
});
});
https://codepen.io/pwkip/pen/oNvxNYZ
I have a div contains a row with 2 columns. Left column contains an image and right side contains some text. I've tried 100s of different combinations but couldn't figure out how to avoid overlapping problem. As you can see the images, when I start to resize the window, it starts to overlapping.
<div class="py-5">
<section class="my-5"><!-- Section -->
<div class="container"><!-- Container -->
<div class="row"><!-- Grid row -->
<!-- Grid column -->
<div class="col-xs-12 col-md-6">
<img th:src="#{/img/about.jpg}" src="" alt="">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xs-12 col-md-6">
<!-- Section heading -->
<h1 class="h1-responsive font-weight-bold mb-4">About Us</h1>
<!-- Section description -->
<p class="lead grey-text mx-auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
</div>
<!-- Grid column -->
</div><!-- Grid row -->
</div><!-- Container -->
</section><!-- Section -->
</div>
I would love to have some margin top when its small as well, to have a clear separation.
UPDATE
Ryan Maffey, your solution works good up until a certain point. This is the result just before going for mobile view. Looks so bad at this point. I would love to have image on its own row if it shrinks more than 50%. Is it possible?
UPDATE 2
I finally found the combination I was looking for. This result solved all my problems.
<div>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-6 my-4">
<img style="width: 100%;" th:src="#{/img/about.jpg}" alt="">
</div>
<div class="col-md-12 col-lg-6 my-4">
<h1 class="h1-responsive font-weight-bold mb-4">Header</h1>
<p class="lead grey-text mx-auto">Lorem ipsum...</p>
</div>
</div>
</div>
</section>
</div>
It looks as though the image is overflowing the column.
Adding CSS width: 100% onto the image will mean that it is only ever as wide as the width of the column it's in.
In the Mobile view you need to center the image vertically. Just use the parent div's style of that image to display: inline-block; height: 100%; vertical-align: middle; and that image to vertical-align: middle; max-height: 100px;
<div class="row">
<div class="col-lg-12">
<div class="container-fluid top">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of typ
</p>
</div>
</div>
i have given col-lg-12 to a div, but on giving position: fixed why it is taking least size. why still i need to give width:100 percentage to div.
A simple Bootstrap architecture like
<div class="container-fluid">
...
</div>
You can see more on http://getbootstrap.com/css/#overview-container
Your correct architecture (not always, but most of the time) is:
container - row - col
So in this case it would be something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of typ
</p>
</div>
</div>
</div>
Now, if the text doesn't go all the way to the edge is because col-lg-* classes have a gutter padding of 15px. Simply remove the col-lg-* class and you will have the row instead which it doesn't have a padding.
See my demo here
EDIT
Credit to Tim Lewis:
"the container and container-fluid both have a 15px margin and row has a -15px margin. Make sure to not wind up with a -15px or 30px margin, depending on how you use them"
I think it should be corrected as
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
Instead of using a responsive table i managed to get 3 colums with bootstrap to display data, and with cells that got the same height, i tried to make it responsive, so the cells stay on the same line..i am not sure if my way using #media is clever and it seems not to work when its resized to super narrow. thanks
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
#media (max-width: 3500px) {
.minh {
min-height: 250px;
background-color: blue;
}
}
#media (max-width: 1200px) {
.minh {
min-height: 320px;
background-color: red;
}
}
#media (max-width: 990px) {
.minh {
min-height: 500px;
background-color: blue;
}
}
##media (max-width: 400px) {
.minh {
min-height: auto;
background-color: red;
}
}
</style>
</head>
<body>
<div class="container">
<!-- first item-->
<div class="col-md-4 col-sm-4 text-center">
<div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
<div class="text-center minh">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </div>
<div class="text-center"><br>www.url.de</div>
</div>
<!-- second item-->
<div class="col-md-4 col-sm-4 text-center">
<div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
<div class="text-center minh">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="text-center"><br>www.url.de</div>
</div>
<!-- third item-->
<div class="col-md-4 col-sm-4 text-center">
<div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
<div class="text-center minh">he standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div>
<div class="text-center"><br>www.url.de</div>
</div>
</div>
</body>
</html>
if you want to keep the three columns always in horizontal line, you should use:
<div class="col-xs-4 text-center">
The code
<div class="col-md-4 col-sm-4 text-center">
has not sense because when the screen md becomes sm, the column has size=4 again: no changes.
Also the images can be responsive with the class thumbnail:
<div class="thumbnail">
<img src="http://placehold.it/350x150" alt=""></div>
<div>
I made an example in jsfiddle:
http://jsfiddle.net/linkita/bdvo05cg/