Twitter Bootstrap Question posted in

Bootstrap code not working: Row & Col, Checkboxes displaying vertically – Twitter bootstrap

Trying to align 32 checkboxes w/labels in rows that are 4 across. It is currently stacking all 32 vertically. I’ve modeled my code after other examples but am still getting the same results no matter what I seem to do. Not sure if it’s my html or css…

Here is a JS Bin link: https://jsbin.com/pepejom/edit?html,css,output

Here is my html:

    <!doctype html>

    <html>
      <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
        <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
        <link id="ppstyle" rel="stylesheet" type="text/css" href="css/style.css">

      </head>

      <body onLoad="onLoaded()">
        <div class="container">
                <section class="panel" id="data">
                    <div id="dataSelection">

                        <div class="container" id="allTeams">
                            <div class="row">
                              <div class="col-md-12"><input class="radio_checkbox" id="allTeams" type="checkbox" name="allTeams">All Teams</div>
                            </div>
                        </div>
                        <div class="container" id="singleTeams1">
                          <div class="row">
                            <div class="col-md-3 centered"><input class="radio_checkbox" value="3800" type="checkbox" name="allTeams">ARI</div>
                            <div class="col-md-3 centered"><input class="radio_checkbox" value="0200" type="checkbox" name="allTeams">ATL</div>
                            <div class="col-md-3 centered"><input class="radio_checkbox" value="0325" type="checkbox" name="allTeams">BAL</div>
                            <div class="col-md-3 centered"><input class="radio_checkbox" value="0610" type="checkbox" name="allTeams">BUF</div>
                          </div>
                        </div>
                        <div class="container" id="singleTeams2">
                          <div class="row">
                            <div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="1200" type="checkbox" name="allTeams">DAL</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="1400" type="checkbox" name="allTeams">DEN</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="1540" type="checkbox" name="allTeams">DET</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="1800" type="checkbox" name="allTeams">GB</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2120" type="checkbox" name="allTeams">HOU</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2200" type="checkbox" name="allTeams">IND</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2250" type="checkbox" name="allTeams">JAX</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2310" type="checkbox" name="allTeams">KC</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2510" type="checkbox" name="allTeams">LA</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="4400" type="checkbox" name="allTeams">LAC</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2700" type="checkbox" name="allTeams">MIA</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3000" type="checkbox" name="allTeams">MIN</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3200" type="checkbox" name="allTeams">NE</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3300" type="checkbox" name="allTeams">NO</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3410" type="checkbox" name="allTeams">NYG</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3430" type="checkbox" name="allTeams">NYJ</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2520" type="checkbox" name="allTeams">OAK</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3700" type="checkbox" name="allTeams">PHI</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="3900" type="checkbox" name="allTeams">PIT</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="4600" type="checkbox" name="allTeams">SEA</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="4500" type="checkbox" name="allTeams">SF</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="4900" type="checkbox" name="allTeams">TB</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="2100" type="checkbox" name="allTeams">TEN</div>
                            <div class="col-md-3"><input class="radio_checkbox" value="5110" type="checkbox" name="allTeams">WAS</div>
                          </div><!-- end single teams row -->
                        </div><!-- end single teams container -->
                    </div><!-- end dataSelection -->
                </section><!-- end panel: data -->   

        </div><!-- end container -->
      </body>
    </html>

Here is my css:

* {
    padding:0;
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
    font-size: 100%;
    font-weight:200;
    letter-spacing: .07em;
    color:#757575;
    background-color:#262626;
}

.panel {
  padding: 1em;
  margin: 0 auto;
  margin-bottom: 5px;
  width: 260px;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;  1F1F1F
  background-color:#292929;
}

.radio_checkbox { margin-right: 5px; }

div {
    /* text-align: left; */
    margin-bottom: 5px;
}

.centered {
    border: solid;
    border-color: #fff;
    border-width: 1px;
    text-align: center;
}

The html above uses links from JS Bin for bootstrap. In my actual code I link to bootstrap that I have downloaded and use locally…

<script src="./lib/jquery-3.2.1.js"></script>
<script src="./js/ext.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link id="ppstyle" rel="stylesheet" type="text/css" href="css/style.css">
Tags:

3

Answers


  1. 0

    You need to put the groups of four in rows:

    <div class="row">
     <div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
     <div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
     <div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
     <div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
</div>
<div class="row">
     <div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
     <div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
     <div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
     <div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
</div>
etc....
    Login or Signup to reply.
  2. 0

    Try using table-cell property for div containers, .container class.

    just add this:

    .container{
    display: table-cell;
}

    Something like this:

    .container{
    display: table-cell;
}

* {
    padding:0;
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
    font-size: 100%;
    font-weight:200;
    letter-spacing: .07em;
    color:#757575;
    background-color:#262626;
}

.panel {
  padding: 1em;
  margin: 0 auto;
  margin-bottom: 5px;
  width: 260px;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;  1F1F1F
  background-color:#292929;
}

.radio_checkbox { margin-right: 10px !important; }

div {
    /* text-align: left; */
    margin-bottom: 5px;
}

.centered {
    border: solid;
    border-color: #fff;
    border-width: 1px;
    text-align: center;
}
    <html>
   <head>
      <meta charset="utf-8">
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script src="https://code.jquery.com/jquery.min.js"></script>
      <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
      <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
      <link id="ppstyle" rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body onLoad="onLoaded()">
      <div class="container">
         <section class="panel" id="data">
            <div id="dataSelection">
               <div class="container" id="allTeams">
                  <div class="row">
                     <div class="col-md-12"><input class="radio_checkbox" id="allTeams" type="checkbox" name="allTeams">All Teams</div>
                  </div>
               </div>
               <div class="container" id="singleTeams1">
                  <div class="row">
                     <div class="col-md-3 centered"><input class="radio_checkbox" value="3800" type="checkbox" name="allTeams">ARI</div>
                     <div class="col-md-3 centered"><input class="radio_checkbox" value="0200" type="checkbox" name="allTeams">ATL</div>
                     <div class="col-md-3 centered"><input class="radio_checkbox" value="0325" type="checkbox" name="allTeams">BAL</div>
                     <div class="col-md-3 centered"><input class="radio_checkbox" value="0610" type="checkbox" name="allTeams">BUF</div>
                  </div>
               </div>
               <div class="container" id="singleTeams2">
                  <div class="row">
                     <div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="1200" type="checkbox" name="allTeams">DAL</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="1400" type="checkbox" name="allTeams">DEN</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="1540" type="checkbox" name="allTeams">DET</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="1800" type="checkbox" name="allTeams">GB</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2120" type="checkbox" name="allTeams">HOU</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2200" type="checkbox" name="allTeams">IND</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2250" type="checkbox" name="allTeams">JAX</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2310" type="checkbox" name="allTeams">KC</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2510" type="checkbox" name="allTeams">LA</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="4400" type="checkbox" name="allTeams">LAC</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2700" type="checkbox" name="allTeams">MIA</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3000" type="checkbox" name="allTeams">MIN</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3200" type="checkbox" name="allTeams">NE</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3300" type="checkbox" name="allTeams">NO</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3410" type="checkbox" name="allTeams">NYG</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3430" type="checkbox" name="allTeams">NYJ</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2520" type="checkbox" name="allTeams">OAK</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3700" type="checkbox" name="allTeams">PHI</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="3900" type="checkbox" name="allTeams">PIT</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="4600" type="checkbox" name="allTeams">SEA</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="4500" type="checkbox" name="allTeams">SF</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="4900" type="checkbox" name="allTeams">TB</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="2100" type="checkbox" name="allTeams">TEN</div>
                     <div class="col-md-3"><input class="radio_checkbox" value="5110" type="checkbox" name="allTeams">WAS</div>
                  </div>
                  <!-- end single teams row -->
               </div>
               <!-- end single teams container -->
            </div>
            <!-- end dataSelection -->
         </section>
         <!-- end panel: data -->   
      </div>
      <!-- end container -->
   </body>
</html>
    Login or Signup to reply.
  3. 0

    You can move the width attribute from the .panel to .container { width: 260px; } and it should work.

    Also I did some changes on your code so it is to closer the bootstrap standards. Hope it helps…!

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
        * {
            padding:0;
            margin:0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        }

        body {
            font-size: 100%;
            font-weight: 200;
            letter-spacing: .07em;
            color: #757575;
            background-color:#262626;
        }

        .container {
            width: 260px;
        }

        .panel {
            padding: 1em;
            margin: 0 auto 5px;
            border: 1px solid #333333;
            background-color:#292929;
        }

        .block-checkboxes {
            text-align: center;
        }

        .block-checkboxes > div,
        .centered > div,
        #allTeams {
            margin-bottom: 5px;
        }

        .block-checkboxes input {
            display: block;
            margin: 0 auto;
        }

        .centered label {
            border: solid 1px #fff;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <section class="panel" id="data">
        <div class="row">
            <div class="col-md-12" id="allTeams">
                <label><input type="checkbox" name="all-teams">All Teams</label>
            </div>
        </div>

        <!-- If you want radio buttons set type="radio" and give them the same name -->
        <div class="row centered" id="singleTeams1">
            <div class="col-md-3"><label><input value="3800" type="radio" name="single-teams1">ARI</label></div>
            <div class="col-md-3"><label><input value="0200" type="radio" name="single-teams1">ATL</label></div>
            <div class="col-md-3"><label><input value="0325" type="radio" name="single-teams1">BAL</label></div>
            <div class="col-md-3"><label><input value="0610" type="radio" name="single-teams1">BUF</label></div>
        </div>

        <!-- or if you want checkboxes so that you can get multiple items give them a name as an array -->
        <div class="row block-checkboxes" id="singleTeams2">
            <div class="col-md-3"><label><input value="0750" type="checkbox" name="teams[]">CAR</label></div>
            <div class="col-md-3"><label><input value="0810" type="checkbox" name="teams[]">CHI</label></div>
            <div class="col-md-3"><label><input value="0920" type="checkbox" name="teams[]">CIN</label></div>
            <div class="col-md-3"><label><input value="1050" type="checkbox" name="teams[]">CLE</label></div>
            <div class="col-md-3"><label><input value="1200" type="checkbox" name="teams[]">DAL</label></div>
            <div class="col-md-3"><label><input value="1400" type="checkbox" name="teams[]">DEN</label></div>
            <div class="col-md-3"><label><input value="1540" type="checkbox" name="teams[]">DET</label></div>
            <div class="col-md-3"><label><input value="1800" type="checkbox" name="teams[]">GB</label></div>
            <div class="col-md-3"><label><input value="2120" type="checkbox" name="teams[]">HOU</label></div>
            <div class="col-md-3"><label><input value="2200" type="checkbox" name="teams[]">IND</label></div>
            <div class="col-md-3"><label><input value="2250" type="checkbox" name="teams[]">JAX</label></div>
            <div class="col-md-3"><label><input value="2310" type="checkbox" name="teams[]">KC</label></div>
            <div class="col-md-3"><label><input value="2510" type="checkbox" name="teams[]">LA</label></div>
            <div class="col-md-3"><label><input value="4400" type="checkbox" name="teams[]">LAC</label></div>
            <div class="col-md-3"><label><input value="2700" type="checkbox" name="teams[]">MIA</label></div>
            <div class="col-md-3"><label><input value="3000" type="checkbox" name="teams[]">MIN</label></div>
            <div class="col-md-3"><label><input value="3200" type="checkbox" name="teams[]">NE</label></div>
            <div class="col-md-3"><label><input value="3300" type="checkbox" name="teams[]">NO</label></div>
            <div class="col-md-3"><label><input value="3410" type="checkbox" name="teams[]">NYG</label></div>
            <div class="col-md-3"><label><input value="3430" type="checkbox" name="teams[]">NYJ</label></div>
            <div class="col-md-3"><label><input value="2520" type="checkbox" name="teams[]">OAK</label></div>
            <div class="col-md-3"><label><input value="3700" type="checkbox" name="teams[]">PHI</label></div>
            <div class="col-md-3"><label><input value="3900" type="checkbox" name="teams[]">PIT</label></div>
            <div class="col-md-3"><label><input value="4600" type="checkbox" name="teams[]">SEA</label></div>
            <div class="col-md-3"><label><input value="4500" type="checkbox" name="teams[]">SF</label></div>
            <div class="col-md-3"><label><input value="4900" type="checkbox" name="teams[]">TB</label></div>
            <div class="col-md-3"><label><input value="2100" type="checkbox" name="teams[]">TEN</label></div>
            <div class="col-md-3"><label><input value="5110" type="checkbox" name="teams[]">WAS</label></div>
        </div>
    </section>
</div>
</body>
</html>

    I embedded the style to the same document to be more compact, you can always separate it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search