Photoshop Question posted in
The official user guide can be found here.

col-md-3 not displaying correct – Photoshop

Following design is made in photoshop with a 12 grid system:
enter image description here

I’m trying to create this using bootstrap with class='col-md-3' for each input however, when I do this they display next to each other but when I add a margin only 3 divs display per row. Am I doing something wrong? I thought bootstrap automatically added margins for col’s.

    <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Bleeding Love">Bleeding Love</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Better in Time">Better in Time</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Angel">Angel</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="I Will Be">I Will Be</div>
Tags:

2

Answers


  1. 0

    Bootstrap has a class ‘row’ that you can use to define rows. When your columns are wrapped in a row, some margin is applied.

    CSS from Bootstrap:

    .row {
    margin-right: -15px;
    margin-left: -15px;
}

    Wrappe your divs like this:

    <div class="row">
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Bleeding Love">Bleeding Love</div>
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Better in Time">Better in Time</div>
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Angel">Angel</div>
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="I Will Be">I Will Be</div>
    </div>

    Depending on how much margin you are applying, the columns may not all fit within your row. It may also be helpful for you to reed up on containers and how they behave.

    I would have commented but I don’t have enough reputation yet.

    Login or Signup to reply.
  2. 0

    You could use Inline checkboxes and radios and add another class inside your columns for any styling.

    .songs {
  background: #eee;
  padding: 20px;
  margin: 10px;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" name="chk_spirit" value="Bleeding Love">Bleeding Love</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox2" name="chk_spirit" value="Better in Time">Better in Time</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox3" name="chk_spirit" value="Angel">Angel</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox4" name="chk_spirit" value="The First Time Ever I saw Your Face">The First Time Ever I saw Your Face</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox5" name="chk_spirit" value="Whatever it Takes">Whatever it Takes</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox6" name="chk_spirit" value="The Best You never Had">The Best You never Had</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox7" name="chk_spirit" value="I Will Be">I Will Be</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox8" name="chk_spirit" value="Homeless">Homeless</label>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search