How to preserve grid layout across devices using Bootstrap?

Question

I am building a website using Bootstrap v.3 which needs to be consistent across devices. I want the same layout to be maintained across all the devices. I have used the following code to display two youtube videos side by side.

<div class="row">
        <div class="col-md-7 col-lg-7 col-sm-7 col-xs-7" id="introduction">
            <p>The project uses Machine Learning to identify the waste items. A brief introduction about the Machine Learning technology is provided in the video below.
            </p>
            <iframe width="500" height="205" src="https://www.youtube.com/embed/yofjFQddwHE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 
        </div>
        <div class="col-md-5 col-lg-5 col-sm-5 col-xs-5">

            <iframe src="https://www.youtube.com/embed/7YgnJELpMyE?ecver=2" width="450" height="305" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>

The site looks like this on Desktop -

However, on mobile phone, it looks like this.

As you can see, the layout changes inspite of having col-md-* col-sm-* and col-xs-* values same. Please help.

Answer 1

Note for TwBs v4 users: replace col-xs-* with col-*.

---

Original answer (TwBs v3) : Your col-* classes apply perfectly fine.

And Bootstrap is mobile first which means col-xs-7 doesn't need col-sm-7, col-md-7 or above.

You can check it by selecting the elements and watching their bounding-rect-box'es (which are highlighted by most dev-tools). However, this doesn't stop <iframe> elements (which have hardcoded width and height properties) to overflow the widths of their parents. If you want to override that, you need to set their width to 100%:

iframe {
  display: block;
  width: 100%;
}

See it working:

iframe {
  display: block;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-7" id="introduction">
      <p>The project uses Machine Learning to identify the waste items. A brief introduction about the Machine Learning technology is provided in the video below.
      </p>
      <iframe width="500" height="205" src="https://www.youtube.com/embed/yofjFQddwHE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <div class="col-xs-5">
      <iframe src="https://www.youtube.com/embed/7YgnJELpMyE?ecver=2" width="450" height="305" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
</div>

If you apply it and it doesn't work, it means different CSS rules are applied on those properties by stronger selectors in your project, leaving you two options:

• find and disable those rules (you can inspect element to find all rules currently applying to it)
• use stronger (more specific) selectors in your CSS (you can find plenty of online resources explaining the principles of CSS specificity - remember the stronger your selector, the harder you're making it for yourself to modify it later. Ideally one should always use the least specific selectors applying the desired rules, thus ensuring they any future mods are easy to apply).

Note: most likely, iframe selector is not strong enough for your project. You might use an #id, a .class or, if you don't want to change the markup by adding any extra classes or ids, you can use the negation to inflate its specificity:

iframe:not(#_):not(#_)` { /* css rules here */ }