# Bootstrap responsive layout

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%;">
<li><strong><%= name %></strong></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>


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