Home ›

Twitter Bootstrap

Nov 01, 2012  By Reuven Lerner
 in

Now, if this seems like a lot of work just to get started with LESS, you're right. And in general, you probably won't want to start off adjusting the source LESS files, but rather just playing with the resulting CSS classes and other goodies Bootstrap provides. To do that, you simply can take a snapshot of the compiled CSS files created by LESS. One quick-and-dirty way to do this is to grab the CSS file that came with the Bootstrap documentation; although you won't be able to change things in the LESS source, it's good enough for beginning purposes. Just look in docs/assets/css/bootstrap.css, and copy that into your Web project.

A middle ground, which allows you to customize things easily but doesn't require that you install and use the LESS compiler each time, is to use the Bootstrap configure-and-download functionality, from the Bootstrap home page. Enter the colors and basic design paradigms you want to use, and you'll get a custom CSS file delivered to your browser.

Finally, it's possible to run LESS in the browser, because (as I indicated above) it's written in JavaScript. However, I've generally found this to be a less acceptable way to go about things, if only because it's so much slower, and of course, I'll always want to use it on the server, so I generally get things going there instead.

Using Bootstrap

In every case except for the in-browser LESS compiler, you always will end up with a CSS file, typically named bootstrap.css. This file should be placed, not surprisingly, alongside your other CSS files, and then incorporated into your HTML file in the standard way: 


<link href="/bootstrap.css" media="all" 
 ↪rel="stylesheet" type="text/css"/>

If you fire up your HTML file with just that, you'll see...well, almost nothing. A little bit has changed, namely the default fonts and margins (which probably have disappeared). But for the most part, you really haven't changed anything, and there aren't any obvious benefits. That's because Bootstrap is an à la carte system, in which you can take any or all of it, depending on your interests and needs.

That said, one thing that you'll almost certainly want to do is add a div tag with the "container" class immediately within your body tag, as follows: 


<!DOCTYPE html>
<html lang="en">
  <head>
    <h3>ATF</h3>
    <link href="bootstrap.css" media="all" rel="stylesheet"
     ↪type="text/css" />
  </head>
  <body>
    <div class="container">
    <h1>Title</h1>
    <p>Body</p>
    <p>Body 2
      <ul>
        <li>Thing One</li>
        <li>Thing Two</li>
        <li>Thing Three</li>
      </ul>
    </p>
    </div>
  </body>
</html>

If your system is like mine, you'll see that the contents have shifted over to the right, with a large left-hand margin. Actually, the size of the margin depends on the width of your browser. By using a div within the body, the width of that div can stay relatively stable, even as the browser width changes around it.

Now, things truly become interesting when you start to divide your file into separate rows. You see, Twitter Bootstrap provides you with a grid—meaning that you divide your text into rows, and that each row consists of content, each of which consumes a certain number of columns. Bootstrap uses a 12-column grid, meaning that within any row, you can mix and match text using any combination of 12 columns. You indicate how many columns wide something should be by assigning a class of "spanN" to your HTML element, where N is a number between 1 and 12, inclusive.

For example, you can have a wide paragraph as follows: 


<div class="row">
    <p class="span12">Wide paragraph. Very wide paragraph. 
    Super-duper wide paragraph. Fill the screen's width paragraph.
    Use lots of text to fill the screen's width paragraph.</p>
</div>

______________________

Senior Columnist, Linux Journal

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

It's a really nice starting

Anonymous's picture
Submitted by Anonymous (not verified) on Tue, 01/08/2013 - 15:29.

It's a really nice starting point for new web projects, and imho a lot cleaner Cleaners London than using say jQuery Mobile or jQuery UI for an application base... There is definitely not a kitchen sink approach with makes it flexible... Here's a site that I've been working on using it recently.

Bootstrap

RonTrex's picture
Submitted by RonTrex on Sat, 01/05/2013 - 03:27.

Bootstrap is awesome. I've been using it for various projects but my favorite by far is to create mobile websites with Bootstraps fluid design. In fact, Bootstrap has been gaining quite the popularity recently and there's even a website for all sorts of bootstrap resources. What makes me love bootstrap is it's simplicity. You only have to specify a few classes to get the website looking the way you like it, the rest is already done for you.

Ron @ http://www.bluepelicanloans.com/

Everybody got lazy!

Robson's picture
Submitted by Robson (not verified) on Tue, 11/06/2012 - 20:20.

Twitter Bootstrap is a wonderful tool and it help developing sites really faster.
The problem of Bootstrap is that it seems to have made everybody lazy: I'm really tired of seing sites with the same look over and over.
To try to solve this issue, I made a themer for it: http://bootswatcher.com.
I hope it helps to get back people's creativity...

Not just for CSS challenged

Scott Keller's picture
Submitted by Scott Keller (not verified) on Fri, 11/02/2012 - 13:51.

Bootstrap is great even for those who aren't CSS challenged. Every good web developer uses some predefined CSS to set sane base fonts, even out browser inconsistencies and provide necessary utility classes (like clearfix).

Bootstrap not only provides this but using less, you can set some variables and customize the look and feel quickly and easily so your page doesn't look exactly like every other Bootstrap page ever created.

I wish they'd convert their icons to a web font (see Font Awesome for a great implementation of this). I also wish it was a little friendlier with jQuery UI (I want Bootstrap look & feel buttons with jquery's .button() function to provide better functionality).

minor nits...

Michael J. Ryan's picture
Submitted by Michael J. Ryan (not verified) on Thu, 11/01/2012 - 18:59.

should be explicit; npm -g install less

less prefers to go into a global install, but for demo purposes, as this blog, it's best to specify... also, in windows "global" is per user, not per system.

There are also server plugins that will do less compilation (and caching of compiled files for you). And they are available for a number of frameworks as well (if you're using RoR, Express, IIS, Apache, etc..) I've gotten it plugged into a couple of web projects with Visual Studio, as well as in deployment scripts.

It's a really nice starting point for new web projects, and imho a lot cleaner than using say jQuery Mobile or jQuery UI for an application base... There is definitely not a kitchen sink approach with makes it flexible... Here's a site that I've been working on using it recently.

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions