Making Beautiful Style Together: Visual Studio and Bootstrap

By Bill Hatfield  |  eMail Email    Print Print  

Accounting for Screen Size

Notice the way div columns are identified:

    <div class="col-md-4" style="background-color:pink;">

       Of all the animals in the world, my favorite is the sphynx.



The class is col-md-4. You know the 4 indicates it spans four columns. And here the md here stands for medium, referring to the kind of screen you expect. Here are all the options:



Max Column Width

Common Devices


< 768px




>= 768px

About 62px



>= 992px

About 81px

Standard Desktop



About 97px

High Resolution Desktop


You can also have, for example, an xs and an md specified for the same column. This gives you finer control over how the layout changes at different sizes. Note too that each scales up to the next, so if you specify md, it will also apply to lg as well.

For example, suppose you have boxes on your page with article titles from various sites across the web. Each box could have a column that looks like this.

<div class="col-sm-6 col-md-4 col-lg-3">

   <h1>Article Title</h1>

   <p>Article text</p>



Since three different sizes are shown, each with a different number of columns to occupy, the behavior of the columns change depending on the width available.

  • When there’s plenty of room (lg), the box only takes three columns, making it possible for four to display beside each other.
  • With md, a box takes four columns, so only three can appear beside each other.
  • Finally, at sm, a box takes six columns, thus only allowing two abreast.




Think of it this way: When the box is on a large screen, it doesn’t need as much space. But when the browser width gets smaller, the number of columns required gets bigger. This has the effect of keeping the box at roughly the same actual size, regardless of the width available.

Responsive Utilities

Another tool providing more control over how and when your elements are displayed are the visible and hidden elements.

  • visible-xs            
  • visible-sm           
  • visible-md          
  • visible-lg             
  • hidden-xs           
  • hidden-sm         
  • hidden-md        
  • hidden-lg

How do you use them? Suppose you wanted to display a swoosh image at the top of your page, but only when on a large screen. All you need to do is add another row above the ones with the boxes that looks like this.

    <div class="row">

        <div class="col-lg-12 visible-lg" >

<img src="https://marianoace.files.wordpress.com/2014/06/img-page-header-swoosh-top.png"/>       




Now you see it…


And now you don’t!



Page 4 of 5

Previous Page
1 2 3 4 5
Next Page

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo