1
\$\begingroup\$

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>
\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.