Reputation: 29

Elements within a bootstrap modal form are not lining up

I am learning bootstrap and doing one of the assignment to create a modal-form, but I don't seem to get the elements within the form lined up as expected. tried wrapping the entire <form> within a <div class="container-fluid">. I was expecting the "radio" buttons and the date input text field will align, but they don't. Help, can someone point to things that I did wrong?

The result:
Resulting modal form

The code:

<div id="reserveModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Reserve Table</h4>
            </div>
            <div class="modal-body">
                <form action="POST" id="reservetable" name="reservetableform" class="form-inline" role="form">
.                   <!--Number of Guests-->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-4">
                            <label class="control-label text-right">Number Of Guests</label>
                            </div>
                            <div class="col-xs-8">
                                <div class="radio">
                                    <label for="reservation1" class="radio-inline">
                                        <input type="radio" value="1" name="reserveguest" id="guest1">1</label>
                                    <label for="reservation2" class="radio-inline">
                                        <input type="radio" value="2" name="reserveguest" id="guest2">2</label>
                                 </div>
                            </div>
                        </div>
                    </div>

                    <!--Date and time-->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-4">
                            <label class="control-label text-right">Date and Time</label>
                            </div>
                            <div class="col-xs-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" aria-label="date" placeholder="Date">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" aria-label="time" placeholder="Time">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Answers (3)

Felipe Alarcon

Reputation: 956

You may want to use a table to display that data in an easier form. It's not advisable to use tables to layout a website but for forms it's perfectly acceptable.

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        
        <!-- beginning form -->
        
        <form class="form-horizontal">
          <table style="width: 100%">
            <tr>
              <td>
                <label for="radio">number of guests</label>
                <input type="radio" name="radio"> 1
                <input type="radio" name="radio"> 2
              </td>
            </tr>

            <tr>
              <td>
                <label for="date and time">Date</label>
                <input type="date" name="date">
              </td>
            </tr>
            <tr>
              <td>
                <label for="time">Time</label>
                <input type="time" name="time">
              </td>
            </tr>
          </table>
        </form>
        
        <!-- end of form -->
        
      </div>
    </div>

Upvotes: 0