How to align div horizontally in a row using Bootstrap
up vote
-1
down vote
favorite
I am trying to divide a page into two parts i.e. 6 + 6 columns and put 3 divs horizontally in each part. Divs exceeding 3 align in bottom row in same part of page.
I am trying but still not able to align correctly. Here is my code. How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>html bootstrap-4
edited Nov 11 at 18:17
Smollet777
1,140915
asked Nov 11 at 18:10
XCeptable
59141434
add a comment |
up vote
-1
down vote
favorite
I am trying to divide a page into two parts i.e. 6 + 6 columns and put 3 divs horizontally in each part. Divs exceeding 3 align in bottom row in same part of page.
I am trying but still not able to align correctly. Here is my code. How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>html bootstrap-4
edited Nov 11 at 18:17
Smollet777
1,140915
asked Nov 11 at 18:10
XCeptable
59141434
Each element is relative to the parent; a col-sm-6 will be 50%, but the col-sm-2 inside it will be approx. 16% of the 50%, or 8% of the total width.
– davewoodhall
Nov 11 at 18:13
But these are not aligning horizontally but vertically. 16+16+16 = 48, so a 4th one with this ratio should go into next row. But this is not happening. This is how I am thinking.
– XCeptable
Nov 11 at 18:16
1
Take a look at this fiddle: jsfiddle.net/6d09q3ru --- in bootstrap 4, simply calling the "col" class will give elements the same widths,; they must however be in a row.
– davewoodhall
Nov 11 at 18:23
yescoldoes automatic width calculations and fits accordingly, recently came around it, when I had to make 5 cols within a row.
– Nikhil Kinkar
Nov 11 at 18:28
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I am trying to divide a page into two parts i.e. 6 + 6 columns and put 3 divs horizontally in each part. Divs exceeding 3 align in bottom row in same part of page.
I am trying but still not able to align correctly. Here is my code. How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>html bootstrap-4
edited Nov 11 at 18:17
Smollet777
1,140915
asked Nov 11 at 18:10
XCeptable
59141434
I am trying to divide a page into two parts i.e. 6 + 6 columns and put 3 divs horizontally in each part. Divs exceeding 3 align in bottom row in same part of page.
I am trying but still not able to align correctly. Here is my code. How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>html bootstrap-4
html bootstrap-4
edited Nov 11 at 18:17
Smollet777
1,140915
asked Nov 11 at 18:10
XCeptable
59141434
edited Nov 11 at 18:17
Smollet777
1,140915
asked Nov 11 at 18:10
XCeptable
59141434
edited Nov 11 at 18:17
Smollet777
1,140915
edited Nov 11 at 18:17
Smollet777
1,140915
edited Nov 11 at 18:17
Smollet777
1,140915
1,140915
asked Nov 11 at 18:10
XCeptable
59141434
asked Nov 11 at 18:10
XCeptable
59141434
asked Nov 11 at 18:10
XCeptable
59141434
59141434
Each element is relative to the parent; a col-sm-6 will be 50%, but the col-sm-2 inside it will be approx. 16% of the 50%, or 8% of the total width.
– davewoodhall
Nov 11 at 18:13
But these are not aligning horizontally but vertically. 16+16+16 = 48, so a 4th one with this ratio should go into next row. But this is not happening. This is how I am thinking.
– XCeptable
Nov 11 at 18:16
1
Take a look at this fiddle: jsfiddle.net/6d09q3ru --- in bootstrap 4, simply calling the "col" class will give elements the same widths,; they must however be in a row.
– davewoodhall
Nov 11 at 18:23
yescoldoes automatic width calculations and fits accordingly, recently came around it, when I had to make 5 cols within a row.
– Nikhil Kinkar
Nov 11 at 18:28
add a comment |
Each element is relative to the parent; a col-sm-6 will be 50%, but the col-sm-2 inside it will be approx. 16% of the 50%, or 8% of the total width.
– davewoodhall
Nov 11 at 18:13
But these are not aligning horizontally but vertically. 16+16+16 = 48, so a 4th one with this ratio should go into next row. But this is not happening. This is how I am thinking.
– XCeptable
Nov 11 at 18:16
1
Take a look at this fiddle: jsfiddle.net/6d09q3ru --- in bootstrap 4, simply calling the "col" class will give elements the same widths,; they must however be in a row.
– davewoodhall
Nov 11 at 18:23
yescoldoes automatic width calculations and fits accordingly, recently came around it, when I had to make 5 cols within a row.
– Nikhil Kinkar
Nov 11 at 18:28
Each element is relative to the parent; a col-sm-6 will be 50%, but the col-sm-2 inside it will be approx. 16% of the 50%, or 8% of the total width.
– davewoodhall
Nov 11 at 18:13
Each element is relative to the parent; a col-sm-6 will be 50%, but the col-sm-2 inside it will be approx. 16% of the 50%, or 8% of the total width.
– davewoodhall
Nov 11 at 18:13
But these are not aligning horizontally but vertically. 16+16+16 = 48, so a 4th one with this ratio should go into next row. But this is not happening. This is how I am thinking.
– XCeptable
Nov 11 at 18:16
But these are not aligning horizontally but vertically. 16+16+16 = 48, so a 4th one with this ratio should go into next row. But this is not happening. This is how I am thinking.
– XCeptable
Nov 11 at 18:16
1
1
Take a look at this fiddle: jsfiddle.net/6d09q3ru --- in bootstrap 4, simply calling the "col" class will give elements the same widths,; they must however be in a row.
– davewoodhall
Nov 11 at 18:23
Take a look at this fiddle: jsfiddle.net/6d09q3ru --- in bootstrap 4, simply calling the "col" class will give elements the same widths,; they must however be in a row.
– davewoodhall
Nov 11 at 18:23
yes
col does automatic width calculations and fits accordingly, recently came around it, when I had to make 5 cols within a row.– Nikhil Kinkar
Nov 11 at 18:28
yes
col does automatic width calculations and fits accordingly, recently came around it, when I had to make 5 cols within a row.– Nikhil Kinkar
Nov 11 at 18:28
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
answered Nov 11 at 18:21
Kira
714
add a comment |
up vote
1
down vote
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>answered Nov 11 at 18:33
Nikhil Kinkar
363318
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
answered Nov 11 at 18:21
Kira
714
add a comment |
up vote
1
down vote
accepted
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
answered Nov 11 at 18:21
Kira
714
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
answered Nov 11 at 18:21
Kira
714
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
answered Nov 11 at 18:21
Kira
714
answered Nov 11 at 18:21
Kira
714
answered Nov 11 at 18:21
Kira
714
answered Nov 11 at 18:21
Kira
714
714
add a comment |
add a comment |
up vote
1
down vote
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>answered Nov 11 at 18:33
Nikhil Kinkar
363318
add a comment |
up vote
1
down vote
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>answered Nov 11 at 18:33
Nikhil Kinkar
363318
add a comment |
up vote
1
down vote
up vote
1
down vote
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>answered Nov 11 at 18:33
Nikhil Kinkar
363318
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>answered Nov 11 at 18:33
Nikhil Kinkar
363318
answered Nov 11 at 18:33
Nikhil Kinkar
363318
answered Nov 11 at 18:33
Nikhil Kinkar
363318
answered Nov 11 at 18:33
Nikhil Kinkar
363318
363318
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251699%2fhow-to-align-div-horizontally-in-a-row-using-bootstrap%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Each element is relative to the parent; a col-sm-6 will be 50%, but the col-sm-2 inside it will be approx. 16% of the 50%, or 8% of the total width.
– davewoodhall
Nov 11 at 18:13
But these are not aligning horizontally but vertically. 16+16+16 = 48, so a 4th one with this ratio should go into next row. But this is not happening. This is how I am thinking.
– XCeptable
Nov 11 at 18:16
1
Take a look at this fiddle: jsfiddle.net/6d09q3ru --- in bootstrap 4, simply calling the "col" class will give elements the same widths,; they must however be in a row.
– davewoodhall
Nov 11 at 18:23
yes
coldoes automatic width calculations and fits accordingly, recently came around it, when I had to make 5 cols within a row.– Nikhil Kinkar
Nov 11 at 18:28