Making Beautiful Style Together: Visual Studio and Bootstrap

By Bill Hatfield  |  eMail Email    Print Print  Post a comment

The Boostrap Grid

The grid is the centerpiece of any framework that supports responsive design — and Bootstrap is no exception. The Bootstrap grid contains 12 columns. Text or other elements can appear in each of the 12 columns across a page. But more often, the columns are spanned in various ways. For example, if you want three equal-width newspaper-style columns, you’d put three Span 4 columns beside each other.

1

2

3

4

5

6

7

8

9

10

11

12

Span 4

Span 4

Span 4

 

Three Equal Columns

Putting this idea to use in your page is pretty straightforward. First, you need a container for the grid in the form of a div with a class identified as “container” or “container-fluid”. Usually this tag surrounds the entire page.

<div class="container-fluid">

  <h1>Working with Grid Rows/Columns</h1>

  <p>Resize your browser window to see the magic...</p>

  ...

</div>

 

Next, within the container you’ll need rows and within the rows, columns.

 <div class="row">

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

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

    </div>

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

       Of all the vegetables in the world, my favorite is the loofah.

    </div>

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

       Of all the minerals in the world, my favorite is the goosecreekite.

    </div>

 </div>

 

In the browser, you can see that these are displayed as you’d expect.

 image009

 

What you may not expect is that when the page gets too narrow, the orientation of the “columns” change so that they are presented appropriately for a phone’s screen, for example.

 image010

So you can see that a basic level of responsive design comes without much effort on your part.

 

*** BEGIN SIDEBAR ***

Visual Studio IntelliSense: Your Options, Right at Hand

Visual Studio IntelliSense is a feature that allows you to work like a Web programming guru in CSS and JavaScript by providing a dropdown wherever you are typing code that shows what your options are at that point. Some other editors provide a similar-looking feature, but usually everything but the kitchen sink is in the dropdown, making it tough to find what you want. Visual Studio IntelliSense is different because it is very context-sensitive. It understands your code, the libraries you are using, the variables that are in scope and the valid language elements at this point in your line of code. With that understanding, it is able to provide a very selective list that allows you to zero in on just what you’re looking for.

For example, Visual Studio knows you’re using Bootstrap. So when you are entering a class attribute value, all Bootstrap’s available classes appear. And as you type more, it narrows and narrows your options.

image011

Even cooler, when you are setting a style element, like background-color, it will not only narrow the list as you type, but also show you a color swatch for each option and the hex value for the selected one.

image012

In release after release, IntelliSense has been among Visual Studio’s most popular features. So Microsoft has worked hard to make it the best it can be in all kinds of applications and in all languages. So you’ll find these features not only HTML, CSS files and JavaScript code, but also in C#, Visual Basic, Mobile application projects, XAML and virtually any other kind of file you can edit in Visual Studio. With it you spend less time looking up property, method and argument names/types and more time doing what you love – cutting code!

*** END SIDEBAR ***

Unequal Columns

Suppose you want a narrow column on the left for navigation and then provide the rest of the page for content, you might have a Span 4 beside a Span 8.

1

2

3

4

5

6

7

8

9

10

11

12

Span 4

Span 8

 

image013

Presenting a Hierarchy

Another intuitive feature of the grid is the ability for cells to have sub-cells. This nesting can go as deep as you wish and can be a very intuitive way of presenting information. It’s also pretty easy to implement — you just put the sub-cell inside the parent cell. Here’s an example.

    <div class="row">

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

    Cats

       <div class="col-md-3" style="background-color:papayawhip;">

       Sphynx

       </div>

       <div class="col-md-3" style="background-color:paleturquoise;">

       Bengle

       </div>

    </div>

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

    Vegetables

       <div class="col-md-3" style="background-color:papayawhip;">

       Cucumber

       </div>

       <div class="col-md-3" style="background-color:paleturquoise;">

       Loofah

       </div>

    </div>

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

       Minerals

       <div class="col-md-3" style="background-color:papayawhip;">

       Shungite

       </div>

       <div class="col-md-3" style="background-color:paleturquoise;">

       Goosecreekite

       </div>

    </div>

  </div>

 

This is the result.

image014

 


Page 3 of 5

Previous Page
1 2 3 4 5
Next Page

Make a Comment

Loading Comments...

  • 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