Wanted to build something like this: http://s29.postimg.org/n2me4y65z/img.png
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
</div>
<div class="col-md-6">
...
</div>
<img src="test.png" class="img-responsive"/>
</div>
</div>
issue 1
Cause the div2 stay below the div 1. (display: block does not work)
issue 2
Make the image always stay on the right side. (then disappearing "hidden-xs")
If someone is able to help ;/
You don't need the outer div with the full width, Bootstrap automatically assumes a 12-column layout. Just make sure you're enclosing everything within a div with a class of "container". You can set the positioning using floats.
<div class="container">
<div class="row">
<div id="div1" class="col-md-8" style="{float:left;}">
Div 1 Text
</div>
<div id="div2" class="col-md-4" style="{float:right;}">
<img src="test.png" class="img-responsive"/>
</div>
<div id="div3" class="col-md-8" style="{float:left;}">
Div 2 Text
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>Div 1 text</div>
<div>Div 2 text</div>
</div>
<div class="col-md-4">
<img src="test.png" class="img-responsive"/>
</div>
</div>
Add the bootstrap's affix or responsive-helpers to your image if you need to pin it on scroll on hide on small -resolution devices.
How about using Media object or Media list if it fits your case?
<div class="media">
<a class="pull-right" href="#">
<img class="media-object hidden-xs" src="//placehold.it/200x150" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
Bootstrap3 - Media object
You can play around with this sample here: http://bootply.com/101967
Related
I'm new to bootstrap still. From what I can tell in terms of layout, you can go with two main options: flex or grid. I'm currently attempting to go with the flexbox method, however I've encountered a problem with width.
My goal is to create three rows (the code I've attached only has 1 row for simplicity) that each have two equal width boxes per row. One box will have a picture and the other box will have text. I also want these boxes to be responsive, so that when the screen is small the boxes stack on top of each other (1 by 1). My only guess for the responsive part is that I use d-md-flex. Here's what I have so far:
<!--Row 1-->
<div class="d-flex flex-column mb-3 text-white">
<div class="d-flex flex-row justify-content-between align-items-center">
<div class="text-center"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" class="img-fluid w-100" alt="Responsive image"></div>
<div class="text-center"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p></div>
</div>
My problem is that the image turns out really small and to the left, while the text takes up most of the space on the row. I've attempted playing around with flex-grow/shrink and flex-fill however nothing was changed. Any suggestions (on that and the responsiveness if its not too much to ask)?
.parent {
display : flex;
border : solid 1px;
}
.child {
flex : 1;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<div>Using Flex</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
</div>
</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">Row 2</p>
</div>
</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">Row 3</p>
</div>
</div>
<div>Using Grid</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
</div>
</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 2</p>
</div>
</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 3</p>
</div>
</div>
You can do this.
If you want three rows, you need to use display: flex; as well as flex-direction: column; if you use 3 items they will stand up and the first will be on top, the second after, the third on bottom. if you want to make it any more complex, instead of stacking 3 elements, you can stack 3 more flex boxes, then organize the info from there.
check this out
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
let me know if that helps!
i used this sheet every time i'm working in CSS and its a life saver
The three 'Spares Solutions' columns are in a container called relative. I have given it the properties below:
.relative {
top: -10rem;
position: relative;
}
I know that this is expected behaviour which is what you see in the screenshot.
You can also see that there is content below the three columns. This is where I get my problem.
I would like to know if there is a way to give something a minus value and get rid of the space where it expects to see the three columns.
one solution would be to give the content a minus 10 value. But I would like to avoid this due to the space then being under the content.
This is my current HTML:
<div class="relative home-top-minus">
<div class="row three-column-margin">
<div class="column small-12 medium-4">
<div class="panel-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-tan heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-light-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-brown heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-brown text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-light-orange heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
</div>
<div class="row">
<div class="column small-12 medium-4">
<div class="bubble">
<p>
“Click Spares have saved us
thousands since we joined!!!”,
really great service and they
know exactly how to deal with
tricky customers”
</p>
<p class="heading-light-orange">
Product Retail Manager
</p>
</div>
</div>
<div class="column small-12 medium-8">
<h2 class="h1 heading-light-orange">WHY CLICK SPARES</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large alt">LEARN MORE</a>
</div>
</div>
</div>
use margin-top:-10rem instead of top:-10rem and use z-index:999 or something bigger than the div on the top ( the div before .relative ) has ( in this example top has z-index:2 ) . if it doesn't have a z-index give one manually
.top{z-index:2} , .relative{z-index:3}
let me know if it works ( in the snippet example it works )
.relative {
margin-top: -10rem;
position: relative;
z-index:999;
}
.top {
height:200px;
background:blue;
position:relative;
z-index:2;
}
.bottom {
height:200px;
background:blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="top">
</div>
<div class="relative home-top-minus">
<div class="row three-column-margin">
<div class="column small-12 medium-4">
<div class="panel-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-tan heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-light-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-brown heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-brown text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-light-orange heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
</div>
<div class="row">
<div class="column small-12 medium-4">
<div class="bubble">
<p>
“Click Spares have saved us
thousands since we joined!!!”,
really great service and they
know exactly how to deal with
tricky customers”
</p>
<p class="heading-light-orange">
Product Retail Manager
</p>
</div>
</div>
<div class="column small-12 medium-8">
<h2 class="h1 heading-light-orange">WHY CLICK SPARES</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large alt">LEARN MORE</a>
</div>
</div>
</div>
<div class="bottom">
</div>
Just use margin-top: -10rem; instead of top: -10rem;
I am faced with the challenge to vertical align images inside a Bootstrap grid under text with different height containers.
Fiddle here
This is what it is now:
This is what I want to achieve:
I would like to do this without the use of JavaScript, because that will only help the responsiveness.
I have tried:
Using flexbox, but I can't get the images to stick to the bottom
Give figure the property display:table-cell; and vertical-align:bottom, but the containers are not the same height without flexbox
Positioning the figure absolute and bottom:0;, but this (ofcourse) messes with the parent containers height.
The HTML:
<div class="row">
<div class="col-xs-3">
<p>
Some text here
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
<div class="col-xs-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non turpis eget libero consequat fringilla vel et sem.
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
<div class="col-xs-3">
<p>
Some text here
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
</div>
Flexbox can work.
The trick obviously is to give the columns equal height be setting the .row div to display:flex.
Then each columns also need display:flex but flex-direction:column.
Finally we set the figure to margin-top:auto to "push" it to the bottom in each case.
.row.flex {
display: flex;
}
.row.flex >div {
display: flex;
flex-direction: column;
}
.row.flex > div figure {
margin-top: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex">
<div class="col-xs-3">
<p>
Some text here
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
<div class="col-xs-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non
turpis eget libero consequat fringilla vel et sem.
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
<div class="col-xs-3">
<p>
Some text here
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
</div>
I am teaching myself how to use Bootstrap columns, ran into a small problem.
When I resize my browser to the smallest size possible (or even halfway through, really) to make the css kick in the columns, instead of resizing to fit in 4 images for row it just becomes a single string of images like so:
Here is my html, I am using bootstrap 3. Any help would be appreciated.
<section class="container" style="padding-bottom: 60px;">
<div class="row">
<div class="col-md-6">
<h2>Passion, precision and simplicity</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor
convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa,
sodales tempor convallis et, iaculis ac massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
<strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque.
Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis
et, iaculis ac massa.
</p>
<!-- divider -->
<div class="divider styleColor">
<i class="fa fa-leaf"></i>
</div>
<!-- brands -->
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
</div>
</div>
</div>
</section>
Use the smaller breakpoints like col-sm-* to make the vertical stacking happen at a narrower width. Or, you can use col-xs-* to make the columns never stack.
http://bootply.com/4JKga3vGjl
Note: Contrary to popular opinion, there's no problem having columns that total more than 12 units in a single row. It simply causes the row to wrap. From the docs (http://getbootstrap.com/css/#grid)..
"If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line"
I suggest you to take a look at the doc.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
And in a row, you should have only, on total, the number 12.
Like 4 times col-md-3, or 2x4+2x2, etc
In your case, that could be something like this.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<section class="container" style="padding-bottom: 60px;">
<div class="row">
<div class="col-md-6">
<h2>Passion, precision and simplicity</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor
convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa,
sodales tempor convallis et, iaculis ac massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
<strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque.
Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis
et, iaculis ac massa.
</p>
<!-- divider -->
<div class="divider styleColor">
<i class="fa fa-leaf"></i>
</div>
<!-- brands -->
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
</div>
</div>
</div>
</section>
It seems that you need to add col-sm-3 and col-xs-3 in addition to col-md-3, to handle your columns in lower sizes.
Check this bootply.
you are using the classes "col-md-..." this targets medium devices.
To set up your layout for smaller devices use "col-xs"
Note, that you can use both "col-xs-12 col-md-6" will display the element in 100% width on small devices and 50% width on medium devices and up.
In the bootstrap grid system, there are only 12 colums per row.
you are trying to use only 12 per row.
check out http://getbootstrap.com/css/#grid-example-basic
I use Bootstrap and going to make responsive views both for large desktop and phones.
This is my row section:
<div class="row-fluid section2">
<div class="span3 offset1 asset">
<img class="img-polaroid" alt="Placeholder" src="http://placehold.it/240x300">
</div>
<div class="span7 asset copy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu
mollis justo velit at nunc. Fusce nec egestas sem. Donec
fringilla ante lectus, a pellentesque lacus dignissim ac. Sed
volutpat lorem ut congue malesuada. In facilisis scelerisque
turpis sed lacinia. Donec in orci lectus. Donec auctor semper
quam, eget rhoncus purus fringilla id. Phasellus id nibh eu
risus ultrices adipiscing. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec porta, dui sagittis hendrerit
rutrum, nunc leo tempus nisl, eu mollis justo velit at
</p>
</div>
<div class="span1 asset">
<div class="row-fluid">
<img class="img-polaroid" alt="Placeholder" src="http://placehold.it/50x50">
</div>
<div class="row-fluid">
<img class="img-polaroid" alt="Placeholder" src="http://placehold.it/50x50">
</div>
<div class="row-fluid">
<img class="img-polaroid" alt="Placeholder" src="http://placehold.it/50x50">
</div>
<div class="row-fluid">
<img class="img-polaroid" alt="Placeholder" src="http://placehold.it/50x50">
</div>
</div>
</div>
It looks like this in Chrome on a large desktop:
But phone's landscape is not good and looks like this:
You can notice that small 50X50 pictures are still in one column and don't look good.
How can I rotate my four 50X50 pictures from one column for large desktop to one row on phones?
Here is a way : You can play with Css media query.
In reading the doc you can find the good media queries you need for each device.
Css:
#media (max-width: 767px){
.asset .row-fluid{
float:left;
width:auto;
}
}
JS Fiddle