I am trying to build a layout 2 divs in the left , and one indivudal to the right , but however I am getting 3 divs in vertical . I am currently using bootstrap 3.3.7 , how can I achieve this?
layout
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row d-md-block">
<div class="col-9 border float-left" style="background-color: red">
1 of 3
</div>
<div class="col-3 border taller float-right" style="background-color: blue">
2 of 3
</div>
<div class="col-12 col-md-9 border" style="background-color: green">
3 of 3
</div>
</div>
</div>
First, make two columns of col-6 class. This would split the screen into two columns. Next, in the first column, add a row, and in that row, add two col-12 columns. This would make the columns look like what you want.
Use this code:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
1 of 3
</div>
<div class="col-12">
3 of 3
</div>
</div>
</div>
<div class="col-6">
<div class="col-12" style="margin-left: -1rem">
2 of 3
</div>
</div>
</div>
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>
Using Bootstrap and have row which consist of 4 <div>. I need to column which is more them col-xx-1 and less than col-xx-2. How can I set half of col-xx-2 and rest space pass to next div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
I think you have to create sub columns.
So
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-7"> // Extend the length to combine the two rows
<div class="col-sm-4"> // Gives 1/3 of the 8 length column
THIS ONE IS "COL-SM-1.5ish"
</div>
<div class="col-sm-8"> // Gives 2/3 of the 8 length column.
</div>
</div>
...
I combined the 2 columns together to make it col-sm-7, then did subcolumns within there, that give you more room to work with inside the main column. You can adjust accordingly from there.
Sorry i cant give you a 100% correct answer, i usually just browse for answers, hopefully this helps or guides you in the correct direction.
You can define your own classes on top of bootstrap
Bootstrap uses a 12 column grid. Your total columns need to equal 12. You had 3+2+5+1+1 = 12 originally. Now its 3+1.5+5.5+1+1 = 12
I have converted your original col-sm to col-xs instead, since its easier to read on stackoverflow. The principle is the same
[class*=col]{
box-sizing: border-box;
border: 1px solid black;
}
.col-xs-15,
.col-xs-55 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
#media (min-width: 1px){
.col-xs-15,
.col-xs-55{
float: left;
}
.col-xs-15 {
width: 12.5%;
}
.col-xs-55 {
width: 45.8333333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-2">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-5">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- With changes -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-15">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-55">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
I suggest looking at the bootstrap source code to implement your own classes as well
https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css
Simple by giving additional custom class and add it to your media-query
.custom-width{
width:15% !important;
}
Adjust your width in such a way so that it won't overflow your row
.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
border: 1px solid;
}
#media only screen and (min-width: 768px) {
/* Styles */
.custom-width {
width: 15% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2 custom-width">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
I am trying to give border to div with bootstrap 4 border. With only border property it is appearing weird while with other properties no border is showing up. Please find the code snippet below.
I have tried with the beta 2 version also.
Let me know if I am missing something.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</div>
</body>
</html>
For bootstrap border to work, you have to add the border class. So for example, when you write <span class="border-right-0"> It is stating that no border should be to the right. You haven't stated a border to begin with though so no border is going to show. What you need to do is <span class="border border-right-0">.
It's the Subtractive border so first, you will need a border so you need to include the border class first.
<span class="border border-top-0"></span>
To see it in more effect try this:
<span class="border border-top-0 p-2 border-primary">Border</span>
Using contextual classes and padding utilities you can easily get the difference.
Hey you just need to add some classes for showing the border i.e. border border-primary, border border-secondary etc.
And class "border border-0" means no border.
In class="border border-light", "border-light" is another contextual border color.
Below are useful classes:
A list of contextual border color you can use the below classes:
border-primary
border-secondary
border-white
border-dark
border-light
border-info
border-warning
border-danger
border-success
If you want to get easier then try https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp or https://v4-alpha.getbootstrap.com/utilities/borders/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0 border border-primary">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-primary border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-danger border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
So I've been working on this for the better half of 2 weeks now and can not seem to get this to work out as intended. I'm starting to think that it might be an issue with how deep the rows/columns in question are, but would really like to get some outside insight.
In short, it is the page with -> 2 rows in which the second row contains -> 2 columns in which the second contains -> 3 rows being a breadcrumb, the main content of each page and a footer. Should the page need to extend the nav should remain static. I vaguely recall when starting out seeing some posts of people trying to do a similar layout, but have not been able to find those posts again.
Below is the code in question in as stripped down a form as I could get it:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap and self-made CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- various imports -->
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet">
<style>
html, body{
height: 100%;
width: 100%;
}
h2 {
font-family: 'Chivo', sans-serif;
}
</style>
</head>
<body style="background-color: #000;"> <!-- bgc: black -->
<div class="container-fluid h-100">
<div class="row h-25"style="background-color: #F00;"> <!-- bgc: red -->
<div class="col">
<h1>In the header!</h1>
</div>
</div>
<div class="row h-75" style="background-color: #0F0;"> <!-- bgc: green -->
<div class="col-sm-2 no-gutters h-100" style="background-color: #00F;"> <!-- bgc: blue -->
<nav>
<h2>In the nav bar!</h2>
</nav>
</div>
<div class="col-sm-10 no-gutters h-100" style="background-color: #FF0;"> <!-- bgc: yellow -->
<div class="row align-items-start" style="background-color: #FFF;"> <!-- bgc: white -->
<div class="col">
<main>
<h2>In the breadcrumb!</h2>
</main>
</div>
</div>
<div class="row align-items-center" style="background-color: #0FF;"> <!-- bgc: cyan -->
<div class="col">
<main>
<h2>In the main!</h2>
</main>
</div>
</div>
<div class="row align-items-end" style="background-color: #F0F;"> <!-- bgc: magenta -->
<div class="col">
<footer>
<h2>In the footer</h2>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My questions are:
1. Can a layout like this even be done in bootstrap4?
2. If it can, what changes are needed to make it work?
3. The "nav column" when collapsing on smaller screens remains at h-100 instead of shrinking, am I using the subclasses correctly for the fluid scaling?
Sorry, I don't have much experience using rows and containers in bootstrap 4, however I can provide you flexbox implementation of such a layout. If you understand flexbox, you can use the below code as reference to create your own layout.
Following is a barebone flexbox code to achieve the layout hierarchy you have mentioned. I realize it's not the best of answers, but hope it helps.
<div class="container-fluid d-flex flex-column" style="height: 100%"> <!-- Main container declared as flexbox column -->
<div class="h-25"> <!-- Row 1 in the container -->
</div>
<div class="h-75 d-flex row"> <!-- Row 2 in the container. This itself is a flexbox row -->
<div class="col-sm-2"> <!-- Column 1 of the row -->
</div>
<div class="col-sm-10 d-flex flex-column"> <!-- Column 2 of the row -->
<div> <!-- Row 1 of the column -->
</div>
<div> <!-- Row 2 of the column -->
</div>
<div> <!-- Row 3 of the column -->
</div>
</div>
</div>
</div>
Refer to boostrap4 flexbox document to understand flexbox https://v4-alpha.getbootstrap.com/utilities/flexbox/:
EDIT
Here's a working plunker : https://plnkr.co/edit/WWT5XoHyvLf2paKQItSH?p=preview
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..