Responsive Width

Question

I am new to bootstrap. I have the following bootstrap form:

<form class="form-inline " style="display: inline-block">

   <div class="form-group" >
      <input type="text" class="form-control input-lg" id="inputEmail"  placeholder="full names..."
                                    style="margin: 25px">
   </div>



   <div class="form-group">
        <input type="email" class="form-control input-lg" id="inputEmail" placeholder="email address..."style="margin: 25px">
   </div>

   <button type="submit" class="btn btn-primary mx-auto">Sign Up</button>

</form>

I want to make the text box wider: When I custom style the width then it ceases to be responsive for small windows. The width doesn’t collapse to fit the small screens.

Your suggestion below:

<div class="container">
  <div class="row">
    <div class="col">

      <form class="form-inline " style="display: inline-block">



        <div class="form-group">
          <input type="text" class="form-control input-lg" id="inputEmail" placeholder="Enter full names..." style="margin: 25px;width:400px">
        </div>



        <div class="form-group">
          <input type="email" class="form-control input-lg" id="inputEmail" placeholder="Enter email address..." style="margin: 25px;width:400px">
        </div>

        <button type="submit" class="btn btn-primary mx-auto">Sign Up</button>

      </form>
    </div>
  </div>
</div>

I think this stackover question can help you.[inputwidth in bootstrap](https://stackoverflow.com/questions/18539711/input-widths-on-bootstrap-3) — Arpan jana, Feb 19 '19 at 20:54
hangon your suggestion seems to have worked ..must have been cache thanks — Screwtape007, Feb 19 '19 at 20:56

score 0 · Answer 1 · answered Feb 19 '19 at 20:10

0

<div class="container">
<div class="row">
<div class="col">
<form class="form-inline " style="display: inline-block">
<div class="form-group" >
  <input type="text" class="form-control input-lg" id="inputEmail" placeholder="full names..." style="margin: 25px">
</div>
<div class="form-group">
    <input type="email" class="form-control input-lg" id="inputEmail" placeholder="email address..."style="margin: 25px">
 </div>
 <button type="submit" class="btn btn-primary mx-auto">Sign Up</button>
 </form>

</div>
</div>
</div>

Messy but it can do the Job!

answered Feb 19 '19 at 20:10

abrsh

454
1
6
14

I have applied your suggestions bur i have also applied my desired width in the input text box. see below: – Screwtape007 Feb 19 '19 at 20:26
see this link and try make screen smaller http://all41web.co.za/designs/test/signup.html – Screwtape007 Feb 19 '19 at 20:32

score 0 · Accepted Answer · answered Feb 20 '19 at 00:01

Based on your provided website, you are breaking the responsiveness by using fixed margin: 25px; and width: 300px;

I would solve it by using media queries:

@media (min-width: 430px) {
  input {
    margin: 25px;
    width: 300px;
  }
}

the breakpoint is specific for your case! Generally, I would recommend the bootstrap breakpoints.

Responsive Width

2 Answers2