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>

edited Nov 11 at 18:17

Smollet777

1,064915

asked Nov 11 at 18:10

XCeptable

58941434

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 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 |

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>

edited Nov 11 at 18:17

Smollet777

1,064915

asked Nov 11 at 18:10

XCeptable

58941434

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 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 |

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>

edited Nov 11 at 18:17

Smollet777

1,064915

asked Nov 11 at 18:10

XCeptable

58941434

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

edited Nov 11 at 18:17

Smollet777

1,064915

asked Nov 11 at 18:10

XCeptable

58941434

edited Nov 11 at 18:17

Smollet777

1,064915

asked Nov 11 at 18:10

XCeptable

58941434

edited Nov 11 at 18:17

Smollet777

1,064915

edited Nov 11 at 18:17

Smollet777

1,064915

edited Nov 11 at 18:17

Smollet777

1,064915

asked Nov 11 at 18:10

XCeptable

58941434

asked Nov 11 at 18:10

XCeptable

58941434

asked Nov 11 at 18:10

XCeptable

58941434

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 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 |

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 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

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

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

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 |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

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

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

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

add a comment |

up vote
1
down vote

<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

<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

<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

<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

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky