ocean800 ocean800 - 24 days ago 12
CSS Question

Bootstrap form spacing issues with form-inline and form-group?

So I'm trying to create a basic layout for someone to enter their name and address, and it currently looks something like:

enter image description here

So, I'm basically stacking like this:

<div className='form-inline'></div>
<div className='form-group'></div>
<div className='form-inline'></div>


But why is there a space between the
'form-group'
and the
'form-inline'
? Is there anything I can do to take it out?

To do this, I used this structure:

<form action="" className="form-inline">
<div className="form-group">
<input
className="form-control"
placeholder="First Name"
}}
/>
</div>
<div action="" className="form-group">
<input
className="form-control"
placeholder="Last Name"
/>
</div>
</form>
<form action="" className="form-group">
<input
className="form-control"
placeholder='Street'
/>
</form>
<form action="" className="form-inline">
<div className="form-group">
<input
className="form-control"
placeholder='City'
/>
</div>
<div className="form-group">
<input
className="form-control"
name='state'
placeholder='State'
maxLength='2'
size='2'
type='text'
/>
</div>
<div className="form-group">
<input
className="form-control"
name='zip'
type='text'
placeholder='zip'
maxLength='5'
size='5'
/>
</div>
</form>


Any help is greatly appreciated as I'm new to bootstrap, thanks!!

Answer

.form-group has margin-bottom: 15px; defined, but if the .form-group element is defined inside the .form-inline, it has no margin applied.

Demonstration:

<div class="form-group"></div> <!-- margin-bottom: 15px -->

<div class="form-inline">
  <div class="form-group"></div> <!-- margin-bottom: 0 -->
</div>

So use .form-group inside .form-inline

<div class="form-inline">
  <div class="form-group"></div>
</div>

Hope this helps!