Shayd3 Shayd3 - 1 year ago 108
Javascript Question

Bootstrap - Centering input text box

I'm trying to center an input box on the center of the page. When you click the button "Prices" It should show a text box right under the button centered. Instead, it's showing all the way to the left.

Here is what I have:

<div class="header-content">
<div class="header-content-inner">

<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
<a href='#repair' class="btn btn-primary btn-xl page-scroll sr-intro btn-margin-head">Schedule Repair</a>

<a href="#repair-prices" class="btn btn-primary btn-xl sr-intro btn-margin-head" data-toggle="collapse">Prices</a>
<div id="repair-prices" class="text-center collapse">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">


With this, I get this result after the button click:
The box is all the way to the left.

Any help would be awesome! If you need to see anything else, let me know. Thanks!

0xA 0xA
Answer Source

Try using the <center> tag, that may help.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download