I am using Bootstrap 4 and I have row like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Row -->
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="https://cdn.pixabay.com/photo/2018/10/15/18/32/bee-eaters-3749679_960_720.jpg" alt="" class="img-fluid">
<p>My First Text</p>
</div>
<div class="col-lg-4">
<img src="https://cdn.pixabay.com/photo/2013/04/04/12/34/sunset-100367_960_720.jpg" alt="" class="img-fluid">
<p>My Second Text</p>
</div>
<div class="col-lg-4">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" class="img-fluid">
<p>My Third Text</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
This works fine - but as soon as I decrease the browser size I have the images among themselves which is also expected. Nevertheless the images are now left aligned. So in the mobile view I want the images also horizontal centered but the corresponding text left aligned. When I add the "text-center" to the columns, the images are horizontal center but the text as well. So how can I center the image but leave the text left aligned to the left side of the image?
Instead of using text-center, use mx-auto d-block on the images...
<img src="..." alt="" class="img-fluid mx-auto d-block">
https://www.codeply.com/go/UU1RXLwRUE
Related
Here's an image of what I would like to change
Currently the page has 2 main columns, a sidebar on the left with some rows and a main body on the right. A 3x9 setup. I want the 1st row on the 1st column to move to the very bottom in a mobile view. I thought about seperating the 1st col into 2 different ones and stack them on top of each other and then just change col order on mobile view. But I have no idea how to achieve that...
How the grid looks in html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="row">
<!-- The row I want to move to the very bottom in a mobile view -->
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-lg-9">
<!-- Content -->
</div>
</div>
</div>
Make 1st row two times:
show one on desktop (using Bootstrap classes d-lg-block d-none) and
show one on mobile (using Bootstrap classes d-lg-none d-block).
See the snippet below.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="row d-lg-block d-none">
<!-- Desktop -->
Show me on desktop
</div>
<div class="row">
Row
</div>
<div class="row">
Row
</div>
<div class="row">
Row
</div>
</div>
<div class="col-lg-9 px-0">
Content
</div>
</div>
<div class="row d-lg-none d-block">
<!-- Mobile -->
Show me on mobile
</div>
</div>
Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
I have a square grid. I would like to make the size of the pictures smaller by specifying measurement, while retaining the 2x2 shape, or 3x3 shape etc. Tried setting the width property but did not work. Currently its too big.
How would I resolve this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6 p-0"><img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn" class="w-100 h-100"></div>
</div>
</div>
Even though pictures are smaller , they should touching edge to edge-
For some reason, this is not working
make images the same size in bootstrap grid
This is one way in CSS, looking for Bootstrap way, using grid-template-columns
CSS:
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 0em;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding:0px;
}
HTML:
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
Another helpful site:
https://webdesign.tutsplus.com/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287
HTML Create an Equal Size Square Grid Picture System
Specify Number of Rows and Columns in Grid
HTML Specify Divider gap measurement in Square Grid Picture
Hopefully this will help you out?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" alt="Fruit" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg" alt="Fruit" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" alt="Book" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg" alt="Book" style="width:100%;height:400px">
</div>
</div>
</div>
all images should be of same size e.g 512*512px.
<div class="row">
<div class="col-md-12 p-0">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"
class="">
<img
src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="margin-left:-4px;">
</div>
</div>
Expected behavior
Images should scale down/up and stay in the same line
Actual behavior
I created a row of images which should scale down on smaller devices, but they instead break into a new line.
I'm using Bootstrap 4.
Code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- src omitted -->
<div style="margin:auto; display:table;">
<img class="img-fluid" />
<img class="img-fluid" />
<img class="img-fluid" />
<img class="img-fluid" />
<img class="img-fluid" />
<img class="img-fluid" />
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Use flexbox and keep the default nowrap
.img-fluid {
min-width: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<img class="img-fluid" src="https://picsum.photos/200/200?image=1069">
<img class="img-fluid" src="https://picsum.photos/200/200?image=1065">
<img class="img-fluid" src="https://picsum.photos/200/200?image=1063">
<img class="img-fluid" src="https://picsum.photos/200/200?image=1062">
<img class="img-fluid" src="https://picsum.photos/200/200?image=1063">
<img class="img-fluid" src="https://picsum.photos/200/200?image=1062">
</div>
And to scale on both direction you can add another container for the images:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<div><img class="img-fluid" src="https://picsum.photos/200/200?image=1069"></div>
<div><img class="img-fluid" src="https://picsum.photos/200/200?image=1065"></div>
<div><img class="img-fluid" src="https://picsum.photos/200/200?image=1063"></div>
<div><img class="img-fluid" src="https://picsum.photos/200/200?image=1062"></div>
<div><img class="img-fluid" src="https://picsum.photos/200/200?image=1063"></div>
<div><img class="img-fluid" src="https://picsum.photos/200/200?image=1062"></div>
</div>
You can use the built-in row and col class from bootstrap4 to achieve that.
Demo: http://jsfiddle.net/aq9Laaew/81140/
<div class="container">
<div class="row">
<div class="col">
<img class="img-fluid" />
</div>
...
</div>
</div>
You can also style them using flexbox.
Note: Make sure you use align-items: flex-start; or align-items: center; on the parent element, as align-items: stretch; is the default hence images will look horrible, like the accepted answer.
Updates:
The writer of the accepted answer said there is no difference when setting align-items: flex-start;. Here is the proof to show there is indeed: http://jsfiddle.net/aq9Laaew/81196/
The images without setting the align-items will default to stretch and they're stretched so much that I couldn't even capture them in the screenshot.
But yea the stretch effect might be what OP wants hence that's accepted answer.
I have two divs that must be centered using the Bootstrap class text-center (for mobile reasons). After applying this class, the image and text center perfectly. However, I'd like the text to be centered AND left-aligned so that it is precisely in line with the left side of the image.
I've tried a couple of things: first centering the div and then creating a div around the text, and left-aligning the text with text-left. However, the text does not stay centered and moves all the way left of the column. I'd like it to only go as left as the image. If I set a margin with pixels so that the text is left-aligned with the image, then it does not stay responsive and jumps all over the page when it is resized.
Here is an example of the content centered, and an example of what happens when I center it and then left-align the text:
https://jsfiddle.net/wgr165tL/3/
I'd like to find out how to get the text centered but left-aligned only as far as the left of the image. It is necessary to keep the text-center class. Any input would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<h1>Example 1 (Original)</h1>
(want text to align with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
</div>
<h1>Example 2</h1>
(Tried centering and then left-aligning text, but it goes too far left. Ideally it will line up with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
</div>
</body>
</html>
Another solution is to set some CSS-properties to your "Test Test" div:
In this case add this div-centered class to that div.
A working example :)
.div-centered {
text-align: left;
margin: auto;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<h1>Example 2</h1>
You rock div-centered class!
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered" >Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered">Test Test</div>
</div>
</div>
Hope it helped :)
Add style="display:inline-block" to line 31, to
<div class="col-sm-3" style="display:inline-block">
You can center the div's by giving equal margins on both sides. Like this:
<div class="row">
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Updated Fiddle. Hope it helps!
Edit:
Just use relevant bootstrap .col-**-** classes.
<div class="row">
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Fiddle.
Use .col-sm-** if you want it to appear inline in tablets too.
try to delete the "text-center" in <div class="row text-center">
hope it help you..