How to ensure groups of html elements are aligned horizontally and vertically using Bootstrap?-Twitter bootstrap

SouvikRay
October 6, 2019
210 views
4 votes
4 Answers

I need to provide the user certain options to choose. I have a checkbox, a checkbox text, a dropdown and another checkbox. There will be a bunch of them and I need to put them down in such a way that they are put horizontally until it takes up the full screen and then the next group is aligned vertically by the first checkbox of previous group. Here is the jsfiddle I have shared https://jsfiddle.net/tmpceqy3/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="checkbox-inline">
  <input type="checkbox">India
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">America
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Australia
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">England
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Holland
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Greece
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Egypt
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">France
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Japan
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

Here is how it currently looks like

As you can see, I have a group of html elements per row (checkbox, checkbox text, dropdown, checkbox). I have used &nbsp to create space between dropdown and checkbox since they both were appearing on top of another.

Now I want to put them horizontally until it takes the full screen. Then the next group should appear in the next line but vertically aligned by the first checkbox of each group in previous row.

I have tried something like display: flex and got something like below

It’s able to split it into multiple lines but the checkboxes are screwed up.

How can I achieve the desired result?

Answers

Please add the class in parent like this and CSS, I have done changes in jsfield as well you could check there as well here is the link: https://jsfiddle.net/cgaL462s/ :

    <div class="parent">
        <div class="checkbox-inline">
          <input  type="checkbox">India
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">America
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Australia
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">England
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Holland
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Greece
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Egypt
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">France
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Japan
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>
        </div>

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.checkbox-inline {
  margin-bottom: 20px;
}

Made some changes in fiddle and got the desired results. Below there is link to the fiddle.

https://jsfiddle.net/9qfh0yum/

  .parent {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-inline {
  width : 170px;
  margin-bottom: 20px;
}


<div class="parent">
    <div class="checkbox-inline">
      <input  type="checkbox">India
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">America
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Australia
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">England
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Holland
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Greece
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Egypt
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">France
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Japan
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>
 </div>

when using flex you need to add a flex value to the children. This allows them to know what space they should take up.

Example below:

P.S. Make sur you use name id and for attributes on your inputs so the browser knows what you you want to do.

fiddle: https://jsfiddle.net/kvL8f5h0/1/

Change the width of the window to see how it will switch between the two stlyes.

HTML

<h1>As a list</h1>
<div>
  <div class="checkbox-inline">
    <div>
      <label for="india">
        <input id="india" name="india" type="checkbox" />
        India
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="America">
        <input id="America" name="America" type="checkbox" />
        America
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Australia">
        <input id="Australia" name="Australia" type="checkbox" />
        Australia
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="England">
        <input id="England" name="England" type="checkbox" />
        England
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Holland">
        <input id="Holland" name="Holland" type="checkbox" />
        Holland
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

<hr />
<h1>Now in a row / responsive</h1>
<div class="row">
  <div class="checkbox-inline">
    <div>
      <label for="india">
        <input id="india" name="india" type="checkbox" />
        India
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="America">
        <input id="America" name="America" type="checkbox" />
        America
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Australia">
        <input id="Australia" name="Australia" type="checkbox" />
        Australia
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="England">
        <input id="England" name="England" type="checkbox" />
        England
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Holland">
        <input id="Holland" name="Holland" type="checkbox" />
        Holland
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

CSS

.checkbox-inline {
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  width: 300px;
  margin-bottom: 8px;
}

.checkbox-inline>* {
  flex: 1;
  margin-right: 8px;
}

.checkbox-inline>select {
  flex: 2;
}


.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}

Your fancier style for the input elements does not come through but that is not the question here. I put the labels in a label so I could style them a bit.

Your results may vary with the above noted difference.

.my-checkbox-container {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-inline {
  height: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 12em;
  border: 1px solid #dddddd;
}

.checkbox-inline>select {
  margin-right: 1em;
}

.checkbox-inline label {
  width: 3em;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="container my-checkbox-container">
  <div class="checkbox-inline">
    <input type="checkbox"><label>India</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>America</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox">Australia
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>England</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Holland</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Greece</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Egypt</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>France</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Japan</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.