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
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 trying to put an image and texts side by side in bootstrap inside a single div.. For that I used the class of thumbnail. But using bootstrap thumbnail it makes the image to go at the top and all the texts at the bottom.
So I changed it a bit to put the image and the texts within the thumbnail only and dividing the thumbnail into two parts. But on resizing the screen into small the problem is arising.. The texts are shifting over the image..
Here is the code of what I tried till now
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white; height:210px;">
<div class="col-sm-6 col-md-6 col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
</div>
Screenshot without resizing
Screenshot after resizing
Try this
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-6 col-md-6 col-xs-12 image-container">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
css code write this in media query if u need only for mobile
.image-container{text-align:center}
in case if u need both the image and text side by side in mobile device,
remove the height for the image in media query to mobile devices resolution, give width 100% to the image
You need to make sure you're using div's with the class of row around your columns, also if you're going to have col-xs-6 it sets this columns size (6) on the larger sizes too (no need to use col-sm-6 etc also).
Try this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:none; background:white; height:210px;">
<div class="col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
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