The bootstrap shape shrinks as the screen expands.

I want to make the inputs the same width as the modal. currently the "md" matches the modal, but as soon as the screen expands to "lg", the inputs shrink to half the size of the modal. Am I using col-lg-12 correctly?

    <form class="form-horizontal" action="" method="post">
    <fieldset>
    <legend class="text-center">Contact me</legend>

    <!-- Name input-->
    <div class="form-group">
      <label class="col-md-3 control-label" for="name">Name</label>
      <div class="col-md-9 col-lg-12">
        <input id="name" name="name" type="text" placeholder="Your name" class="form-control">
      </div>
    </div>

    <!-- Email input-->
    <div class="form-group">
      <label class="col-md-3 control-label" for="email">Your E-mail</label>
      <div class="col-md-9 col-lg-12">
        <input id="email" name="email" type="text" placeholder="Your email" class="form-control">
      </div>
    </div>

    <!-- Message body -->
    <div class="form-group">
      <label class="col-md-3 control-label" for="message">Your message</label>
      <div class="col-md-9 col-lg-12">
        <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea>
      </div>
    </div>
    <div class="modal-footer">
    <!-- Form actions -->
    <div class="form-group">
      <div class="col-md-12 text-right">
        <button type="submit" class="btn btn-default btn-md">Close</button>
        <button type="submit" class="btn btn-primary btn-md">Submit</button>
      </div>
    </div>
    </div>
  </fieldset>
  </form>

      

+3


source to share


1 answer


Look at this. LINK



Also notice the lines <div class="col-md-9 col-lg-12">

at<div class="col-md-12 col-lg-12">

+1


source







All Articles