CODEWITHSUNDEEP
csstwitter-bootstrap
anemaria20
anemaria20

Reputation: 1728

Keep Bootstrap inline input elements horizontal until 768px?

I have a Bootstrap form to which I've applied form-inline and have several elements there. I've read that, until 768px, the elements are kept inline. But I found this to not be the case, if I assign input-lg to some elements, the last elements breaks at a new line even above 768px.

An alternative would be to make these elements SMALLER until 768px. Is there a way to do this?

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Title">
  </div>

  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Description">
  </div>
</form>

Upvotes: 2

Views: 817

Answers (3)

Mazi
Mazi

Reputation: 21

<form class="form-horizontal">
<div class="row">
    <div class="form-group col-sm-6">
        <input type="text" class="form-control input-lg" placeholder="Your Title">
    </div>
    <div class="form-group col-sm-6">
        <input type="text" class="form-control input-lg" placeholder="Your Description">
    </div>
</div>
</form>

Use this to keep them on the same line above 768px. If you want to keep the horizontal under 768px just change "col-sm-6" class to "col-xs-6" like this:

<form class="form-horizontal">
<div class="row">
    <div class="form-group col-xs-6">
        <input type="text" class="form-control input-lg" placeholder="Your Title">
    </div>
    <div class="form-group col-xs-6">
        <input type="text" class="form-control input-lg" placeholder="Your Description">
    </div>
</div>
</form>

Upvotes: 2

David Taiaroa
David Taiaroa

Reputation: 25495

Please see my updated example: http://www.bootply.com/paPWbTuwAL

I added bootstrap column classes to each of your form items so you have better control over their sizing, and added a little custom CSS

Hope this helps!

CSS 

.custom-form .form-control{
   width:100%;
}

HTML 

 <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="margin-bottom-30">Get Instant Essay Writing / Editing Help</h1>
            </div>   <!-- end col-xs-12 -->
      </div> <!-- end row -->

      <div class="row">
                <form class="form-inline custom-form">
                    <div class="form-group col-xs-2">
                        <input type="text" class="form-control input-sm " placeholder="Your Title">
                    </div>

                    <div class="form-group col-xs-4">
                        <select class="form-control input-sm">
                                    <option value="0" selected="" disabled="">Choose Assignment Type</option>
                                    <option value="1">Essay</option>
                                    <option value="18">Admission / Scholarship Essay</option>
                                    <option value="12">Research Paper</option>
                                    <option value="26">Research Proposal</option>
                                    <option value="4">Coursework</option>
                                    <option value="2">Term paper</option>
                                    <option value="5">Article</option>
                                    <option value="22">Literature / Movie review</option>
                                    <option value="9">Reports</option>
                                    <option value="3">Dissertation</option>
                                    <option value="29">Thesis</option>
                                    <option value="30">Thesis Proposal</option>
                                    <option value="13">Creative Writing</option>
                                    <option value="11">Business Plan</option>
                                    <option value="15">Speech / Presentation</option>
                                    <option value="7">Outline</option>
                                    <option value="14">Annotated Bibliography</option>
                                    <option value="6">Dissertation Proposal</option>
                                    <option value="17">Proofreading</option>
                                    <option value="25">Paraphrasing</option>
                                    <option value="28">PowerPoint Presentation</option>
                                    <option value="27">Personal Statement</option>
                                    <option value="24">Non-word Assignments</option>
                                    <option value="23">Math Assignment</option>
                                    <option value="21">Lab Report</option>
                                    <option value="20">Code</option>
                                    <option value="19">Case Study</option>
                                    <option value="16">Other types</option>
                        </select>
                    </div>

                    <div class="form-group col-xs-3">
                        <input type="text" class="form-control input-sm mg-up1 col-xs-3" placeholder="Your Email Address">
                    </div>

                    <div class="form-group col-xs-2 mg-up">
                        <button type="submit" class="form-control input-sm col-xs-3">Check The Price</button>
                    </div>
        </form></div>
        <div class="row">

                <h3 class="margin-top-30">Over 7000 Writers and Editors Available 24/7 To Help You Out.</h3>


        </div>
    </div>

Upvotes: 1

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10418

  1. Try to limit the width of the field with the max-width property.
  2. Add the float: left; property to them so that they remain on one line.
  3. Use the overflow: hidden; property to make the form a container of floating elements.

Please check te result: http://www.bootply.com/JXslxuh3qX

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.form-2-groups-on-one-line,
.form-4-groups-on-one-line {
  clear: left;
  overflow: hidden;
}
.form-2-groups-on-one-line .form-group {
  float: left;
  max-width: 50%;
}
.form-4-groups-on-one-line .form-group {
  float: left;
  max-width: 25%;
}
.form-2-groups-on-one-line input,
.form-2-groups-on-one-line select,
.form-4-groups-on-one-line input,
.form-4-groups-on-one-line select {
  max-width: 100%;
}
<form class="form-inline form-2-groups-on-one-line">
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Title">
  </div>
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Description">
  </div>
</form>

<form class="form-inline form-4-groups-on-one-line">
  <div class="form-group">
    <input type="text" class="form-control input-lg" placeholder="Your Title">
  </div>

  <div class="form-group">
    <select class="form-control input-lg">
      <option value="0" selected="" disabled="">Choose Assignment Type</option>
      <option value="1">Essay</option>
      <option value="18">Admission / Scholarship Essay</option>
      <option value="12">Research Paper</option>
      <option value="26">Research Proposal</option>
      <option value="4">Coursework</option>
      <option value="2">Term paper</option>
      <option value="5">Article</option>
      <option value="22">Literature / Movie review</option>
      <option value="9">Reports</option>
      <option value="3">Dissertation</option>
      <option value="29">Thesis</option>
      <option value="30">Thesis Proposal</option>
      <option value="13">Creative Writing</option>
      <option value="11">Business Plan</option>
      <option value="15">Speech / Presentation</option>
      <option value="7">Outline</option>
      <option value="14">Annotated Bibliography</option>
      <option value="6">Dissertation Proposal</option>
      <option value="17">Proofreading</option>
      <option value="25">Paraphrasing</option>
      <option value="28">PowerPoint Presentation</option>
      <option value="27">Personal Statement</option>
      <option value="24">Non-word Assignments</option>
      <option value="23">Math Assignment</option>
      <option value="21">Lab Report</option>
      <option value="20">Code</option>
      <option value="19">Case Study</option>
      <option value="16">Other types</option>
    </select>
  </div>

  <div class="form-group">
    <input type="text" class="form-control input-lg mg-up1" placeholder="Your Email Address">
  </div>

  <div class="form-group mg-up">
    <button type="submit" class="form-control input-lg">Check The Price</button>
  </div>
</form>

Upvotes: 1

Related Questions