Bootstrap responsive layout

Question

I'm creating a responsive page with bootstrap. I tested my code with my browser (Firefox and Chrome) and it works. Is the code clean or is there a better way to code it?

<div class="col-xs-12 col-sm-6 col-md-4" style="margin-top: 2%;">
    <div class="adress">
       <ul style="list-style: none; padding-left: 0">
           <li><strong><%= name %></strong></li>
           <li><%= adresse %></li>
       </ul>
    </div>
    <div>
        <button class="btn btn-default btn-block" type="submit">Choose Address</button>
    </div>
    <div class="row">
    <div style="margin-top: 5%">
        <div class="col-xs-6 col-sm-6 col-md-6">
            <button class="btn-xs btn-default btn-block" id="editBtn" type="submit">Edit</button>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6">
            <button class="btn-xs btn-warning btn-block" id="delBtn" type="submit">Delete</button>
        </div>
    </div>
        </div>
</div>

Answer 1

This is a small piece of code but few things I'm going to highlight here

• When using the col class, it's best practice to have this class under a row class. This creates a grid structure e.g

    <div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
    </div>

• One thing to note here is that in bootstrap grid structure the total number of columns you can have is 12 . You can read more on that Bootstrap Grids . So these lines defines more than 12 columns and it's abusing bootstrap usage

<div class="col-xs-12 col-sm-6 col-md-4" style="margin-top: 2%;">
 <div class="col-xs-6 col-sm-6 col-md-6">

• I can see some Inline css declarations floating about, there isn't anything bad with that but it becomes cumbersome when you have many div's in your page. I suggest defining your css in an external stylesheet

I hope this helps