As we have seen so far, the Twitter Bootstrap Grid System is quite the piece of work. To refresh, it handles the overall layout and structure of your site. We can think of it as a foundation in many ways. Now that we have a good grip on how that part of the Twitter Bootstrap Framework operates, we can start digging into the CSS styling aspect, because let’s face it, we all want to have some fresh styles. In this episode we’re going to take a look at the plethora of options that the CSS classes of Twitter Bootstrap Framework offer us. There is a lot to cover so as always, lets jump right in!
Why Use a CSS Framework?
Ok, so if we can assign styles to our HTML Elements so easily, then what is the point of using a framework. You know friend, that is a great question indeed. The primary benefit is that the CSS standard is very, very large. You have so many options available to you that you will quickly become overwhelmed with option overload. You know the feeling. You have so many selections to choose from and can assemble those choices in so many different ways, that you become entirely bogged down in the maddening and repeating exercise of try this combination, Test, Observe, Tweak. Soon enough you find yourself Trying, Testing, Observing, and Tweaking yourself into Oblivion and your design is simply making small incremental steps to a better result.
Make it Easy Instead!
With a great CSS Framework, instead of having to assign something complex and time consuming to write like this to your HTML Elements:
padding: 10px 20px;
border: 1px solid #C7C7C7;
background: -webkit-gradient(linear, left top, left bottom, from(#2670D1), to(#7A8ED6));
background: -webkit-linear-gradient(top, #2670D1, #7A8ED6);
background: -moz-linear-gradient(top, #2670D1, #7A8ED6);
background: -ms-linear-gradient(top, #2670D1, #7A8ED6);
background: -o-linear-gradient(top, #2670D1, #7A8ED6);
box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #14191C;
-webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #14191C;
-moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #14191C;
text-shadow: #485E96 1px 1px 0px;
box-shadow: 0px 0px 5px 0px #AAAAAA;
-webkit-box-shadow: 0px 0px 5px 0px #AAAAAA;
-moz-box-shadow: 0px 0px 5px 0px #AAAAAA;
border: 1px solid #ffffff;
You simply do something as easy as this:
<button type="button" class="btn btn-primary btn-lg">Awesome Button!</button>
Wow! I’ll go with the second option please!
Twitter Bootstrap Buttons
This leads us right into one of my favorite designs from the framework, Buttons! As we saw above, if you want to create a button in native CSS – it could be a time consuming process. Let’s skip that and use Bootstrap to give us some cool buttons on our Panda Web Design Company Website. We will style our Read more anchor links to look like a button. The great thing here is that the HTML Element will still be just an a tag, but the styling will make it look, act, and feel like a button. All with some very simple markup!
The markup is incredibly easy:
<a class="btn btn-primary" href="#">Read more >></a>
<a class="btn btn-success" href="#">Read more >></a>
<a class="btn btn-info" href="#">Read more >></a>
<a class="btn btn-warning" href="#">Read more >></a>
If you visit the official docs you will find a ton of options for styling buttons, all very slick and easy to use. Worth noting here are the 7 types of base styling available to you:
- Standard Button The default button type. Makes a grey color button with nice styling.
- Primary Button The primary button. Provides an indication of a primary action to take.
- Success Button The success button. The success button indicates a positive action.
- Info Button The info button. Provides an instance of information to the user.
- Warning Button The warning button. Conveys a message to take caution, like a yellow light.
- Danger Button The danger button. Indicates that an error has occurred or a negative action.
- Link Button The link button. This is meant to disguise a button as a standard HTML link.
Twitter Bootstrap Typography
Twitter Bootstrap has some really impressive typography built right into the framework. It may seem like a trivial thing, but really your typography is so, so important in conveying the proper sense of space, emotion, and semantic assignment to the written text. In using our typography correctly, our written text is easier to read, digest, and comprehend. Let’s check out some of the main typography elements now:
This is the h1 tag!
This is the h2 tag!
This is the h3 tag!
This is the h4 tag!
This is the h5 tag!
This is the h6 tag!
This is some awesome text wrapped in a p tag which is assigned the class of lead to indicate important information!
Body Text Examples
This is a simple paragraph wrapped in a p tag which gives us some nice spacing. It represents a group of related thoughts.
Your mileage may vary, and this is the fine print. It makes use of the small tag.
The text right here is really bold.
This text of course is italicized text.
An abbreviation of the word attribute is attr.
Check out the entire list of typography options available to you at the official docs.
Bootstrap Responsive Classes
Bootstrap has some special utility classes to control what is visible or not based on the screen size. Twitter Bootstrap makes use of CSS3 media queries in order to enable this functionality. They are quite useful indeed. As an example, let’s remember our Panda Web Design Company website and scale it down in the browser. What will happen is that the picture of the websites on the upper right hand side of the page will wrap around and look a bit clunky on the small device sizes.
By simply adding a class of
hidden-xs to our image, it will disappear on smaller devices. This can help to make the page nicer to view like so:
Responsive design utilities are not limited to images. You can also use them with print and text as needed.
Image Styling with Twitter Bootstrap
Surprisingly, in the default state of Twitter Bootstrap, embedded images are not actually responsive within the page. That is to say, the pictures in your webpage do not scale based on the size of the device currently browsing. So far in our Panda Web Design Company website, we do not have any responsive images. Let’s change that and go ahead and add the
img-responsive class to all of our images. This makes our images scale as needed when screen sizes change, very cool!
Bootstrap Image Shapes
In addition to the responsive features we can add to images in our Bootstrap enabled website, we can also add some really cool shapes to them as well. This is quite popular on many of the app based websites you see these days where your user icon may be the shape of a circle, or some other type of effect. For our example we will add the
img-rounded class to our Panda, the
img-circle class to our WordPress image, and the
img-thumbnail class to our php framework image and seo image. These classes add rounded corners, make a circle image, and create an outline effect respectively. One we add our classes, this is the result:
Up next we have the super fun icon images we all know and love, the Glyphicons! We see the use of glyphicons everywhere these days, from simple websites to advanced and complex web applications, users and designers alike just can’t get enough of the awesome little visual cues. A glyphicon is like small picture that tells a story. The pictures chosen are so self explanatory, that your users will know what they convey. The other element that glyphicons add is to make your page more visually appealing in it’s design. There are 200 different glyphicon icons to choose from, so surely you will be able to find one or many to meet your particular needs! For our example we’ll add some glyphicon icons to our service links at the Panda Web Design Company website to make them more appealing to our users. The syntax is easy, we just use something like
<span class="glyphicon glyphicon-ok"></span>
where the second option indicates the actual glyphicon to use. For our example we are going to add a checkmark, wrench, search, and thumbs up glyphicon to our services links to make them more attractive. Let’s look at the result!
As we can see, they really do add a nice visual touch to the design.
Twitter Bootstrap Tables
Tables have long been a polarizing force in web design. People seem to either love them or hate them for their use in organizing and presenting data. With bootstrap, there is now only need for love! Styling your tables is ridiculously simple now. You simply add css classes such as
table-hover. Here are a couple of tables with
table-bordered in action.
|1||Powerful Search Engine to find anything you need.||google.com|
|2||Fun social media website to send tweets.||twitter.com|
|3||Google Plus||The new social network.||plus.google.com|
|1||Laravel||Amazing new PHP Framework||laravel.com|
|3||Twitter Bootstrap||Making web design super easy||getbootstrap.com|
CSS Overrides in Twitter Bootstrap
Last up in this tutorial will be a quick touch on the topic of overriding the built in styles of the framework. As we know the C in CSS stands for cascading. What this means is that the browser adheres to the styles defined by name in the CSS, and uses the CSS that is closest to run time. That is to say, it processes the CSS in order and priority is given to the last processed CSS. So for example if we have two stylesheets in our page, the second one takes precedence for classes with the same name. This is how we can override a built in class of the framework if we choose.
Why not hack the original file?
We should leave the core of the framework alone as a best practice. The reason for this is that software by nature is a moving target. Have you even nailed Jelly to a tree? It’s kind of the same idea. Should you spend hours customizing the looks of your design in the original core files of bootstrap, and then find out you need to upgrade the framework at some point in time (you will need to do this), all of your custom styling will be gone. You may even shed a tear, it is a painful process!
Better is to put those customization in their own stylesheet and load that in your page after the bootstrap css file. This way your browser will use all of the styles of the framework, and then for duplicate class names, will choose your version in your stylesheet for any customizations. For example, if we want all h1 tags to be red with a dashed yellow border around them, we can add this to a new style sheet called
mystyle.css like so:
/* CSS Document */
border:dashed thick #FF0;
Then we simply include this file after our bootstrap file like so:
<title>Panda Web Design Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyle.css" rel="stylesheet">
And Voila! We have overridden the built in style. If we upgrade the framework, we get to keep our cool yellow border with red text 🙂
Another fun filled episode of the Twitter Bootstrap Series is in the books friends. We covered a lot of ground with CSS, buttons, typography, responsive classes, image styling, CSS overriding, and more. Add this post to your collection of resources, and keep plugging away in your Web Design education. Up next, a great collection of bootstrap navigation examples!