CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Grizzly
Grizzly

Reputation: 5943

Center Items in Bootstrap row

I have 3 elements in a bootstrap row. This can be easily solved just by giving each of the 3 items a class name col-md-4 but this results in formatting issues.

Here is my code:

<div class="container body-content">

  <form class="well form-inline" style="width: 100%;">

    <div class="row" style="margin:auto">
    <div class="form-group col-md-3" style="width: 31%;">
      <label class="control-label">Maintenance:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
   </div>

   <div class="form-group col-md-3" style="width: 31%;">
      <label class="control-label">Operations:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
   </div>

    <div class="form-group col-md-3" style="width: 31%;">
      <label class="control-label">Safety:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
    </div>

  </div>


</form>

</div>

Here is a bootply.

How do I correctly center these items? I have tried margins but they really aren't getting my anywhere.

Upvotes: 0

Views: 739

Answers (4)

raf
raf

Reputation: 195

Try this one.

<div class="container">

  <form>
     <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label>Maintenance:</label>
            <textarea class="form-control" cols="34" rows="10"></textarea>
            <label>250 characters left</label>
          </div>
        </div>
        <div class="col-md-4">
            <label>Operations:</label>
            <textarea class="form-control" cols="34" rows="10"></textarea>
            <label>250 characters left</label>
        </div>
        <div class="col-md-4">
            <label>Safety:</label>
            <textarea class="form-control" cols="34" rows="10"></textarea>
            <label>250 characters left</label>
        </div>
    </div>
</form>

</div>

Here is the link. http://www.bootply.com/tvCIHTOdAE#

Upvotes: 0

jmag
jmag

Reputation: 826

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">

  <form class="well form-inline text-center" style="width: 100%;">



    <div class="row" style="margin:auto">
    <div class="form-group col-md-3" style="float:none">
      <label class="control-label">Maintenance:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
   </div>

   <div class="form-group col-md-3" style="float:none">
      <label class="control-label">Operations:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
   </div>

    <div class="form-group col-md-3" style="float:none">
      <label class="control-label">Safety:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
    </div>

  </div>


</form>

</div>

Add text-center in parent container. view it in full screen mode.

<form class="well form-inline text-center" style="width: 100%;">

Also col-md-3 has float:left with it. Adress this by adding style="float:none" on the div with col-md-3.

    <div class="form-group col-md-3" style="float:none">

Upvotes: 0

seven
seven

Reputation: 146

Set 100% width in all element means label, textarea. And change col-md-3 to col-md-4. Below is the code snipit.

    <div class="container body-content">

  <form class="well form-inline" style="width: 100%;">

    <div class="row" style="margin:auto">
    <div class="form-group col-md-4" >
      <label class="control-label" style="width:100%;" >Maintenance:</label>
      <textarea class="form-control"  rows="10" style="width:100%;" ></textarea>
      <label style="width:100%;" >250 characters left</label>
   </div>

   <div class="form-group col-md-4"  >
      <label class="control-label" style="width:100%;">Operations:</label>
      <textarea class="form-control"  rows="10" style="width:100%;" ></textarea>
      <label style="width:100%;" >250 characters left</label>
   </div>

    <div class="form-group col-md-4"  >
      <label class="control-label" style="width:100%;">Safety:</label>
      <textarea class="form-control" rows="10" style="width:100%;" ></textarea>
      <label style="width:100%;" >250 characters left</label>
    </div>

  </div>


</form>

</div>

Upvotes: 0

Andy Holmes
Andy Holmes

Reputation: 8077

Edit:

You can use display: flex; justify-content: space-between; on the parent container (that holds the 3 .col-md-3) to achieve exactly what you're after.

You can do this by simply adding .text-center to each of your .col-md-3 elements. This will center all elements.

If you wish to center the text areas alone, you can do this:

<div class="text-center"><textarea class="form-control" cols="34" rows="10"></textarea></div>

Upvotes: 1

Related Questions