CODEWITHSUNDEEP
csstwitter-bootstrap
pricejt
pricejt

Reputation: 143

Bootstrap side by side form elements

I am trying to match a similar layout to this picture using bootstrap 3+. enter image description here

I have all of it working except for the Ends section where there are text boxes next to the radio buttons. Could someone help me with the syntax.

I created a jsFiddle where I am at. jsFiddle

<div class="form-group">
<label class="col-sm-2 control-label">Ends:</label>
<div class="col-sm-6">
  <label class="radio-inline">
<input type="radio" name="ends" id="endsAfter" value="EndsAfter"> After                     </label>
 <label>
    <input type="text" class="form-control" name="afterOccur" id="afterOccur" disabled> occurrences </label>
 </div>
</div>
<div cass="input-group">
<div class="col-sm-6">
  <label class="radio-inline">
    <input type="radio" name="ends" id="endsOn" value="EndsOn">On</label>
  <input type="text" class="form-control col-sm-4" name="onDate" id="onDate" disabled />
</div>
</div>

enter image description here

Upvotes: 0

Views: 1849

Answers (2)

vanburen
vanburen

Reputation: 21653

Here's an example that may give you something to work with at the very least. There's nothing special about it, the only addition is some CSS to keep the Summary label consistent with the rest of the form. It just uses offsets to keep everything lined up correctly and groups controls that need to stay together. You can change the column values to whatever you actually need them to be, just remember to keep them consistent across the form. See Forms.

See working Snippet. 

body {
  padding-top: 30px;
}
#RepeatByBlock {
  display: none;
}
@media (min-width: 768px) {
  label.summary {
    float: right;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form name="form1" class="form-horizontal" method="post">
    <div class="form-group">
      <label class="control-label col-sm-2" for="Repeats">Repeats:</label>
      <div class="col-sm-10">
        <Select name="Repeats" id="Repeats" class="form-control">
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
        </Select>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="RepeatEvery">Repeats Every:</label>
      <div class="col-sm-8">
        <select name="RepeatEvery" id="RepeatEvery" class="form-control">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </div>
      <div class="col-sm-2">
        <label>Weeks</label>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Repeat On:</label>
      <div class="col-sm-10">
        <input type="checkbox" class="checkbox-inline" name="sunday" id="sunday" title="Sunday" /> S
        <input type="checkbox" class="checkbox-inline" name="monday" id="monday" title="Monday" /> M
        <input type="checkbox" class="checkbox-inline" name="tuesday" id="tuesday" title="Tuesday" /> T
        <input type="checkbox" class="checkbox-inline" name="wednesday" id="wednesday" title="Wednesday" /> W
        <input type="checkbox" class="checkbox-inline" name="thursday" id="thursday" title="Thursday" /> T
        <input type="checkbox" class="checkbox-inline" name="friday" id="friday" title="Friday" /> F
        <input type="checkbox" class="checkbox-inline" name="saturday" id="saturday" title="Saturday" /> S
      </div>
    </div>
    <div id="RepeatByBlock" name="RepeatByBlock">
      <div class="form-group">
        <label class="col-sm-2 control-label">Multiple Time</label>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input type="radio" name="RepeatBy" id="RepeatByMonth" value="month" checked>Day of the Month</label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="startsOn">Starts On:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="startsOn" id="startsOn" readonly />
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Ends:</label>
      <div class="col-sm-10">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Never
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 col-sm-offset-2">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">After
          </label>
        </div>
      </div>
      <div class="col-sm-4">
        <input type="text" class="form-control" name="afterOccur" id="afterOccur" disabled>
      </div>
      <label class="control-label col-sm-2" for="afterOccur">Occurrences</label>
    </div>
    <div class="form-group">
      <div class="col-sm-2 col-sm-offset-2">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">On
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" name="onOccur" id="onOccur" disabled>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2">
        <label class="summary">Summary:</label>
      </div>
      <div class="col-sm-10">
        Weekly on Monday, until Jan 19, 2016
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-8 col-sm-offset-2">
        <button class="btn btn-default" type="submit">Done</button>
        <button class="btn btn-default" type="submit">Cancel</button>
      </div>
    </div>
  </form>
</div>

Upvotes: 0

Suman KC
Suman KC

Reputation: 3528

How about you try building forms on bootstrap by dragging and dropping form elements from here http://bootsnipp.com/forms , i guess that would exactly build what you have asked for.

Edit:

Drag from elements from left to right and view HTML. Try building here http://bootsnipp.com/j87klPolka/formbuilder3.html It's more clear

Upvotes: 1

Related Questions