Bootstrap modal with horizontal form

Question

I am trying to get a horizontal form inside of a bootstrap modal.

No matter what I try to do, the labels are above the form elements. I know it must be something simple, but I have tried everything I can think of.

This is what I have at the moment.

<div class="modal fade" id="newEventModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body form-horizontal">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="title" class="control-label col-sm-2">Title</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="title">
              </div>
            </div>
            <div class="form-group">
              <label for="end" class="control-label col-sm-2">End</label>
              <div class="col-sm-10">
                <div class='input-group date' id='datetimepickerend'>
                  <input type='text' class="form-control" id='end' />
                  <span class="input-group-addon">
                      <span class="fa fa-calendar"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="allday" class="control-label col-sm-2">All day event</label>
              <div class="col-sm-10">
                <input type="checkbox" class="form-control" id="allday">
              </div>
            </div>
            <div class="form-group">
              <label for="description" class="control-label col-sm-2">Description</label>
              <div class="col-sm-10">
                <textarea class="form-control" id="description"></textarea>
              </div>
            </div>
            <div class="form-group">
              <label for="wwner" class="control-label col-sm-2">Owner</label>
              <div class="col-sm-10">
                <select name='owner'>
                  <option>Agent A</option>
                  <option>Agent B</option>
                  <option>Agent C</option>
                  <option>Agent D</option>
                  <option></option>
                </select>
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

http://jsfiddle.net/1aeur58f/868/

Please help.

Clue: Resize the window and you will see that there are media queries at play. The problem is your `.col-XX`. You're using `sm`. Have you tried changing them? — ProEvilz, Nov 21 '17 at 17:26

score 3 · Accepted Answer · answered Nov 21 '17 at 17:28

It's because of your window/screen size. You used .col-sm but you should use .col-xs as a basis because xs is for the smallest devices.

Always start with .col-xs and then if you require different functionality at a bigger device size (e.g. laptop) then you can introduce the other classes such as .col-sm or .col-md etc.

Bootstrap is mobile first. Whilst you used sm, chances are you were using a device that didn't fall into that category.

See here for more information on the Bootstrap grid classes.

jQuery(document).ready(function(e) {
    jQuery('#mymodal').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title">Modal title</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body form-horizontal">
     <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="title" class="control-label col-xs-2">Title</label>
      <div class="col-xs-10">
     <input type="text" class="form-control" id="title">
      </div>
    </div>
    <div class="form-group">
      <label for="start" class="control-label col-xs-2">Start</label>
      <div class="col-xs-10">
     <div class='input-group date' id='datetimepickerstart'>
      <input type='text' class="form-control" id='start' />
      <span class="input-group-addon">
       <span class="fa fa-calendar"></span>
      </span>
       </div>
      </div>
    </div>
    <div class="form-group">
      <label for="end" class="control-label col-xs-2">End</label>
      <div class="col-xs-10">
     <div class='input-group date' id='datetimepickerend'>
       <input type='text' class="form-control" id='end' />
       <span class="input-group-addon">
        <span class="fa fa-calendar"></span>
       </span>
     </div>
      </div>
    </div>
    <div class="form-group">
      <label for="allday" class="control-label col-xs-2">All day event</label>
      <div class="col-xs-10">
     <input type="checkbox" class="form-control" id="allday">
      </div>
    </div>
    <div class="form-group">
      <label for="timezone" class="control-label col-xs-2">Timezone</label>
      <div class="col-xs-10">
     <input type="text" class="form-control" id="timezone">
      </div>
    </div>
    <div class="form-group">
      <label for="repeat" class="control-label col-xs-2">Repeat</label>
      <div class="col-xs-10">
     <select name='repeat'>
      <option>Never</option>
      <option>Daily</option>
      <option>Weekly</option>
      <option>Monthly</option>
      <option>Annually</option>
       </select>
      </div>
    </div>
    <div class="form-group">
      <label for="description" class="control-label col-xs-2">Description</label>
      <div class="col-xs-10">
     <textarea class="form-control" id="description"></textarea>
      </div>
    </div>
    <div class="form-group">
      <label for="wwner" class="control-label col-xs-2">Owner</label>
      <div class="col-xs-10">
     <select name='owner'>
       <option>Agent A</option>
       <option>Agent B</option>
       <option>Agent C</option>
       <option>Agent D</option>
       <option></option>
     </select>
      </div>
    </div>
    
     </form>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-primary">Save changes</button>
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>

Bootstrap modal with horizontal form

1 Answers1