1

so I'm learning bootstrap and trying to center this input in the center of the container. I tried adding margin: auto to the input but no work. i tried placing it in another container but still not working.

here's the html so far:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

  <div class="container">
  <div class="my-container">
    <h1 class="text-center">Get A Free Course</h1>
    <br>


    <div class="row ">
      <div class="col-md-10">
    <div class="input-group">
  <div class="input-group-addon">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div></div></div>



    </div>
</div>

and css:

.my-container{
  border: 1px solid;
}

However, the input is not being centered under the title. Text-center, margin: auto don't work.

AhmadBenos
  • 141
  • 1
  • 9

2 Answers2

1

To your div having class col-md-10, add css below

float: unset;
margin: 0 auto;
Sumit Sinha
  • 189
  • 1
  • 2
  • 12
0

Never mind, i solved it by just adding a previous div and an after div.

HTML is now:

<div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
    <div class="input-group">
  <div class="input-group-addon">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div></div>
      <div class"col-md-2"></div>
    </div>
AhmadBenos
  • 141
  • 1
  • 9