Search code examples
csstwitter-bootstrapresponsive-designmedia-queries

Bootstrap vs Own Media Queries (HTML Impact)

I've been recently learning about Responsive Design more in detail.

I have used Bootstrap and continue to use it but I came to a point that I'm wondering Pros/Cons and effect on HTML cleanliness and readability (and whether it impacts performance)

Here is what I came to question but haven't found an answer.

With bootstrap, it seems that I need to declare the same section of HTML multiple times, so that I can apply the respective StyleSheets for the media screen size.

<section class="col-md-8">... more html ...</section>
<section class="col-sm-8">... same HTML above or slightly modified ...</section>
<section class="col-xs-12">... similar idea to sm-8 ... </section>

Whereas with straight Media Queries I could have

<section class="my-section> ... some html ... </section>

And then the media queries
@media screen and (max-width: 825px)
    section.my-section { ...adjustment... }
@media screen and (max-width: 760px)
    section.my-section { ...adjustment... }
@media screen and (max-width: 625px)
    section.my-section { ...adjustment... }

These media screen could be separated into respective separate files to keep the code cleaner and more self-contained

So, Given that writing our own media queries require more time and effort, in your experience, what is a better choice, or under which circumstances? (say, small projects vs very large projects with multiple people working on it)

Or are there better practices for Bootstrap that make it better to avoid this HTML duplicated/triplicated/etc html code.

Does the HTML code duplication have an impact on performance, considering that sometimes very large data can be presented. (say using a framework like Angular to iterate and render a list of elements, and thus will have to create the elements for each of the media screen sections declared using bootstrap)

Thank you for your time.

Solution

  • With bootstrap you call all the classes on the same element to give it responsiveness, not create separate divs for each:

    <section class="col-md-8 col-sm-8 col-xs-12">
 YOUR CONTENT HERE
</section>

    Try not to duplicate your html content, though sometimes you just have to when there's no other way.