Stepping Out With Bootstrap From Twitter

Stepping Out With Bootstrap from Twitter | Webdesigntuts+
10/25/11 4:38 PM
Advertise Here
Stepping Out With Bootstrap from Twitter

Connor Turnbull on Sep 7th 2011 with 13 comments
Tutorial Details
Difficulty: Beginner Estimated completion time: 25 mins Topic: Bootstrap, from Twitter Twitter introduced Bootstrap recently, a library of CSS styles aimed at web app developers in need of some design help. The toolkit includes everything from grid layouts down to buttons and modals, and works on pretty much all modern browsers, all the way back to IE7. Lets see what we can do with it Bootstrap is also enhanced through the Less preprocessor, which adds some additional reasons to use Bootstrap, although well exclude the Less functionality from the scope of this tutorial, to keep thing simple. Bootstrap includes a bit of documentation, but nowhere does it really explain how to use the toolkit (instead, theres just one big demo page for you to investigate yourself). So, in this article, were going to strip down Bootstraps example page and analyze how to replicate the elements that Bootstrap covers. In providing examples, well also build up a sample webpage made entirely with Bootstrap.
Whats Covered?
Were going to take a look at the following (use the links to skip to the various sections): The Grid System Typography
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/ Page 1 of 20
10/25/11 4:38 PM
Tables Forms and Buttons Navigation Tabs and Pills Pagination Alerts and Error Messages Modals
The Grid System
Grids are an integral part of a lot of web designs. Just as a city planner designs on a grid, a web designer can also align his elements in such a way. Bootstrap includes a grid system that totals 940px in width, encased inside the container class. There are sixteen different column classes all together, with the width of each one cumulatively adding 60px as the number increases, starting at 40px. For example, the span1 class has a width of 40px, whereas the span3 class has a width of 160px. As demonstrated in the image above, we can use a combination of different classes to create a total width equalling 940px, including the 20px margin added to each one. For example, the use of four div.span4 classes would, translated, mean 220+20+220+20+220+20+220 which, once we whip out the calculator, equals a full 940 pixels. By wrapping all these in a row class, Bootstrap accounts for the twenty-pixel margin on the last column by moving the whole thing twenty-pixels back. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 <div/class="row"> ////<div/class="span6"> ////////<h1>Column/#1</h1> ////////<p>Content/for/column/#1.</p> ////</div> ////<div/class="span5"> ////////<h1>Column/#2</h1> ////////<p>Content/for/column/#2.</p> ////</div> ////<div/class="span5"> ////////<h1>Column/#3</h1> ////////<p>Content/for/column/#3.</p> ////</div> </div>
The above code will generate a fairly equal set of CSS columns displaying some minimal content. Naturally, we can just swap around some of these classes or add/subtract tags to create different layouts. Another feature of the Bootstrap toolkit is the ability to skip a column by offsetting it. The offset classes are, again, numbered 1http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/ Page 2 of 20
10/25/11 4:38 PM
16 where their widths follow the same +60 pattern, although they now include an additional 40px to compensate for the left and right margin of said column. For example, we can take the above example, but remove the middle column by adding the offset5 class to the end tag. For example: 01 02 03 04 05 06 07 08 09 10 <div/class="row"> ////<div/class="span6"> ////////<h1>Column/#1</h1> ////////<p>Content/for/column/#1.</p> ////</div> ////<div/class="span5/offset5"> ////////<h1>Column/#3</h1> ////////<p>Content/for/column/#3.</p> ////</div> </div>
Its pretty simple to manipulate this with only a few numbers needing to be changed, and the image at the start of this section should be used as a guide for some recommended structures.
Typography
One of the things that runs through pretty much all of the elements shown in this tutorial is typography. Bootstrap comes with all the typography tags youd want styled for, everything from an <address> tag to <h1> and the whole heading hierarchy. Honestly, this is Web Development 101! stuff that you probably already know, so I wont waste your time explaining how to style. Its pretty elemental stuff. It is important to note that Bootstrap does account for older, now-deprecated tags, so you shouldnt worry there if youre using a CMS that uses them, or for a client who doesnt know any alternative.
Quoting
Where Bootstrap does need a little more explaining is when you come to use the <blockquote> tag. You can use the tag on its own to show the quote indented, with a thick grey border on the left. However, it can be enhanced by nesting other tags inside to attribute the quote. When it comes to adding an attribute, simply wrap your quote text in a <p> tag, and the source in a <small> tag and Bootstrap will automatically style and put a dash in front of the source. 1 2 3 4
<blockquote> ////<p>Lorem/ipsum/dolor/sit/amet,/consectetur/adipiscing/elit./Integer/posuere/ ////<small>Connor/Turnbull,/August/30th</small> </blockquote>
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/
Page 3 of 20
10/25/11 4:38 PM
Youll end up with a result similar to the image below, depending on what content you put in between the paragraph and small tags.
Lists
Lists are another bit of the typography spectrum that is covered in Bootstrap, and comes with four different sets of styles: bulleted lists, nested bulleted lists, ordered lists and glossaries. Again, these are not that hard to use as they dont deviate from whats standard in HTML. Because lists can be constructed in different ways, heres a quick recap of how to use them with the Bootstrap styles.
The code below is a basic unordered, bulleted list that will produce something similar to the first example in the image below. Swap out the ul for an ol to produce an ordered list, like that in the second example. 1 2 3 4 5 <ul> ////<li>Lorem/ipsum/dolor/sit/amet</li> ////<li>Consectetur/adipiscing/elit</li> ////... </ul>
If you add the unstyled class to the unordered list, un-nested list items will not be bulleted, or ordered. Theyll just appear like regular lines, whereas nested items will have a bullet to the left. 1 2 3 4 5 <ul/class="unstyled"> ////<li>Lorem/ipsum/dolor/sit/amet</li> ////<li>Consectetur/adipiscing/elit</li> ////... </ul>
Adding a description list is done in the same way as youd expect outside of Bootstrap, and results in a sample like the last one in the above image. 1 2 3 4 5 6 7 <dl> ////<dt>Lorem/ipsum</dt> ////<dd>Lorem/ipsum/dolor/sit/amet</dd> ////<dt>Consectetur</dt> ////<dd>Consectetur/adipiscing/elit</dd> ////... </dl>
Page 4 of 20
10/25/11 4:38 PM
Tables
Bootstrap is a toolkit thats aimed partly at new web designers, so it doesnt necessarily go without saying that these things are not meant for layouts. Instead tables are meant for tabular data, and Bootstrap does a pretty good job at beautifying your tabular data with its styles, without needing any additional classes or attributes. For example, we can take a look at a regular snippet of HTML that would generate a table. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <table> ////<thead> ////////<tr> ////////////<th>#</th> ////////////<th>First/Name</th> ////////////<th>Last/Name</th> ////////////<th>Language</th> ////////</tr> ////</thead> ////<tbody> ////////<tr> ////////////<td>1</td> ////////////<td>Some</td> ////////////<td>One</td> ////////////<td>English</td> ////////</tr> ////////<tr> ////////////<td>2</td> ////////////<td>Joe</td> ////////////<td>Sixpack</td> ////////////<td>English</td> ////////</tr> ////////<tr> ////////////<td>3</td> ////////////<td>Stu</td> ////////////<td>Dent</td> ////////////<td>Code</td> ////////</tr> ////</tbody> </table>
The code above creates the table in the image below, as used in Twitters official example. It has three content rows and a header in four columns, and is pretty standard. With little manipulation (scratch that, no manipulation) to the standard creation of a table, Bootstrap automatically applies its styles.
In this case, the paramount thing to remember is to correctly nest your tags. The styles do not apply if you dont wrap your heading row in a <thead> tag, for example.
10/25/11 4:38 PM
By default, the table is not zebra-striped, where alternate colors could fill the background of each row. This is easy to enable, however, simply by adding the zebra-striped class to the <table> tag without any manipulation of the rows or individual parts. 1 2 3 4 5 <table/class="zebraYstriped"> ////<thead> ////////<tr> ////////////<th>#</th> ////////////...
Finally, with the addition of a small piece of jQuery, but no change to the HTML apart from adding sortTableExample as the ID of the <table> tag, you can add sorting functionality when the heading of a column is clicked upon. This functionality requires the Tablesorter 2.0 jQuery plugin, downloadable for free. As youve probably already guessed, youll also need to call jQuery for this to work. 01 02 03 04 05 06 07 08 09 10 11
<strong><script/src="http://d3pr5r64n04s3o.cloudfront.net/tuts/195_bootstrap/tu <script> //$(function()/{ ////$("table#sortTableExample").tablesorter({/sortList:/[[1,0]]/}); //}); </script></strong> <table/class="zebraYstriped"/id="sortTableExample"> ////<thead> ////////<tr> ////////////<th>#</th> //...
Forms and Buttons

Most of the stuff weve already covered is pretty simple, where Bootstrap will apply styles to your code with little or no change from normal. Getting that out of the way, we can now move onto some stuff that requires a little more explaining and a bit more tutoring.
Page 6 of 20
10/25/11 4:38 PM
Forms
For forms, there are plenty of different styles you can use, so were going to look at each one individually. You can then just use these in combination with each other, and manipulate them with preexisting knowledge of regular old HTML forms. Firstly, it should be noted that your entire form should be wrapped in a <form> tag, but you probably know that already. Bootstrap also recommends you wrap your elements in <fieldset> tags, with an additional <legend> tag. 1 2 3 4 5 6 <form> ////<fieldset> ////////<legend>Lorem/ipsum/dolor/sit/amet</legend> ////////<em>(your/fields/go/here)</em> ////</fieldset> </form>
Generally, your form setup shouldnt differ from the code above. The only other option that Bootstrap provides is to opt for stacked forms, where labels reside to the top of a field, rather than to the left. That can be achieved by adding the form-stacked class to the <form> tag. 1 <form/class="formYstacked">
Text Input
To kick off our coverage of form fields, well look at a regular input field with a label. The code snippet below is essentially a <label> and an <input> tag, wrapped in a <div> tag with the clearfix class to ensure correct spacing. Additionally, the actual field is wrapped in another <div> with the input class, again, to ensure correct spacing. 1 2 3 4 5 6 <div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<input/type="text"//> ////</div> </div> For this tutorials sake, im going to ignore a few practices that should be employed in your code. For example, each input should have an ID, which is bound to the label through for attribute, and youll generally want to name your input fields to grab them when it comes to processing your data. Were looking specifically at how to use Bootstraps styles here, so those types of attributes havent been included in my examples to try and keep things as simple as possible. Nevertheless, even though they are being used in conjunction with Bootstrap, those tasks should not be forgotten. By adding the xlarge class to the <input>, the form field is widened. We can disable an input in the regular way, by adding the appropriate attributes, as demonstrated in the example below. Bootstraps styles are added in the disabled class, which should be added to visually show that a user cannot interact with that field by graying it out.
Page 7 of 20
10/25/11 4:38 PM
1 2 3 4 5 6
<div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<input/class="xlarge/disabled"/type="text"/placeholder="Lorem/ipsum/dolo ////</div> </div>
While the grayed out approach of a disabled field is achieved by using an <input> tag, an uneditable one is not. Instead, Bootstrap uses a simple <span> that can be used in conjunction with a hidden input. These fields are used for information which the user shouldnt edit, such as an automatically collected date or IP address. 1 2 3 4 5 6 7 <div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<span/class="uneditableYinput">Lorem/ipsum/dolor/sit/amet</span> ////////<input/type="hidden"/value="Lorem/ipsum/dolor/sit/amet"//> ////</div> </div>
Our final look at styling text inputs is to show contextual help when an error is encountered. It is done by adding an error class to the <div> that forms the clearfix, and to the <input> tag itself. Adding a <span> tag with the help-inline class underneath adds the help message on the right side. 1 2 3 4 5 6 7 <div/class="clearfix/error"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<input/class="error"/type="text"//> ////////<span/class="helpYinline">Dolor/sit/amet</span> ////</div> </div>
Dropdown Select
A dropdown menu is structured in a similar way, with the regular code being employed, as shown below.
Page 8 of 20
10/25/11 4:38 PM
01 02 03 04 05 06 07 08 09 10 11 12
<div/class="clearfix"> ////<label>Lorem/Ipsum</label> ////<div/class="input"> ////////<select> ////////////<option>Lorem</option> ////////////<option>Ipsum</option> ////////////<option>Dolor</option> ////////////<option>Sit</option> ////////////<option>Amet</option> ////////</select> ////</div> </div>
The xlarge class to a text field is the opposite of the medium class to a <select> tag. Adding such a class to the dropdown menu of options will actually make the field narrower.
Checkboxes
Checkboxes arent really styled in Bootstrap. The toolkit just arranges them to sit in line with the other fields, and does so by creating a list with each checkbox item. The code is pretty self-explanatory, just be sure to wrap both the label text and the checkbox in the <label> tag so that (a) the checkbox is floated to the left and (b) the checkbox can be selected by clicking on the label. 01 02 03 04 05 06 07 08 09 10 11 12 13 <div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<ul/class="inputsYlist"> ////////////<li> ////////////////<label> ////////////////////<input/type="checkbox"//> ////////////////////<span>Lorem/ipsum/dolor/sit/amet</span> ////////////////</label> ////////////</li> /////////</ul> ////</div> </div>
That code will generate a single checkbox with a label to the right. To create an additional one, just repeat the list item and its contents, then voil, you have list of checkboxes. To disable a checkbox, simply add the disabled attribute to the <input> tag, and the disabled class to the <label> tag.
Page 9 of 20
10/25/11 4:38 PM
1 2 3 4 5 6
<li> ////<label/class="disabled"> ////////<input/type="checkbox"/disabled//> ////////<span>Lorem/ipsum/dolor/sit/amet</span> ////</label> </li>
Additionally, there are two extra types of checkboxes which are paired with text fields: prepended and appended checkboxes. Again, this is fairly self-explanatory and is very similar to a regular text field. However, this time round you need to wrap the checkbox in a <label> tag (with the add-on class), and either the inputprepend or the input-append class to parent <div>. Then, all thats left is to make sure you put the label and the field the right way round, depending on whether you want it prepended or appended.
1 2 3 4 5 6 7
<div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input/inputYappend"> ////////<input/type="text"//> ////////<label/class="addYon"><input/type="checkbox"//></label> ////</div> </div>
The above code is for an appended checkbox, but, if you wanted a prepended one, theres little to change. 1 2 3 4 5 6 7 <div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input/inputYprepend"> ////////<label/class="addYon"><input/type="checkbox"//></label> ////////<input/type="text"//> ////</div> </div>
Page 10 of 20
10/25/11 4:38 PM
File Inputs
File inputs are very much like text fields and the code below is pretty self explanatory. Create a regular file input with the input-file class. 1 2 3 4 5 6 <div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<input/type="file"/class="inputYfile"//> ////</div> </div>
Text Areas
The final Bootstrap style for forms is the text area. The text area is created in the same way as the single line text field. Like enlarging a text field, the text area also has its own class to make it wider, xxlarge. 1 2 3 4 5 6 <div/class="clearfix"> ////<label>Lorem/ipsum</label> ////<div/class="input"> ////////<textarea></textarea> ////</div> </div>
Optionally, you can add a small help line below the field with the following line added immediately after the <textarea> tag. 1 <span/class="helpYblock">Lorem/ipsum/dolor/sit/amet</span>
Buttons
Now its time to process our form, and normally we do so by clicking a button. Fortunately, Bootstrap covers buttons and theyre super simple to add. Buttons can be added through either an <a> or a <button> tag. Both share the same classes and will look
10/25/11 4:38 PM
identical, but you should try and reserve buttons for actions, and links for, well, links. So, for example, a button would be written as so: 1 <button/class="btn">Lorem/ipsum</button>
And an idential button, but created as a link, would be written as so: 1 <a/href="#"/class="btn">Lorem/ipsum</a>
By default, the button will appear in a light gray style. However, this can easily be changed to one of the four others (light blue, blue, green and red) by applying an additional class.
primary for a blue button that is the primary action (e.g. submitting a form) info for a lighter blue button, usually used to access information success for a green button, used to signal success danger for a red button, usually used for irreversible or dangerous actions such
as deleting
1 2 3 4 5
<button/class="btn/primary">Primary</button> <button/class="btn">Default</button> <button/class="btn/info">Info</button> <button/class="btn/success">Success</button> <button/class="btn/danger">Danger</button>
We can also change the size of a button from the default. To enlarge it, simply add the large class or shrink it with the (yep, you guessed it) small class. Finally, to disable a button, all we need to do is add the disabled class and, in the case of an action button, set the disabled attribute. 1 or 1 <a/class="btn/disabled">Lorem/ipsum</a> <button/class="btn/disabled"/disabled>Lorem/ipsum</button>
Navigation
Bootstrap includes a fixed navigation bar that resembles the one on Twitters website. The bar is essentially made up of three sections, the title link, the menu items in the search bar, encased in a couple of <div> tags that arent worthwhile explaining. In the code below, youll notice an <h3> tag that holds the title. Its fairly easy to modify this and to add your own link and text. 1 <h3><a/href="#">Lorem/ipsum</a></h3>
Following that are the menu items, which are just unclassified list items with links. Its straightforward enough to duplicate these items since they require no Bootstrap-specific styles, apart from the active class on the current link.
10/25/11 4:38 PM
1 2 3 4 5 6
<ul> ////<li/class="active"><a/href="#">Home</a></li> ////<li><a/href="#">Lorem</a></li> ////<li><a/href="#">Ipsum</a></li> ////<li><a/href="#">Dolor</a></li> </ul>
The last list is for the dropdown menu. It features a single list item, with another, nested list that appears on hover over. The third line of the code below is the list item that appears constantly on the navigation bar, whereas the list starting at line 4 is the hover items. 01 02 03 04 05 06 07 08 09 10 11 <ul/class="nav/secondaryYnav"> ////<li/class="menu"> ////////<a/href="#"/class="menu">Lorem/ipsum</a> ////////<ul/class="menuYdropdown"> ////////////<li><a/href="#">Dolor/sit</a></li> ////////////<li><a/href="#">Amet/Consequeter</a></li> ////////////<li/class="divider"></li> ////////////<li><a/href="#">Enough/with/the/Latin</a></li> ////////</ul> ////</li> </ul>
As youll notice, adding an empty list item with the divider class will add a divider in the dropdown menu. In use, your topbar should look something like this, positioned right at the top of your page. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div/class="topbar"> ////<div/class="fill"> ////////<div/class="container"> ////////////<h3><a/href="#">WebDesignTuts+</a></h3> ////////////<ul> ////////////////<li/class="active"><a/href="#">Home</a></li> ////////////////<li><a/href="#">Tutorials</a></li> ////////////////<li><a/href="#">Articles</a></li> ////////////////<li><a/href="#">Weekly/Polls</a></li> //////////</ul> //////////<form/action=""> ////////////<input/type="text"/placeholder="Search"//> //////////</form> //////////<ul/class="nav/secondaryYnav"> ////////////<li/class="menu"> ////////////////<a/href="#"/class="menu">Lorem/ipsum</a> ////////////////<ul/class="menuYdropdown"> ////////////////////<li><a/href="#">Dolor/sit</a></li> ////////////////////<li><a/href="#">Amet/Consequeter</a></li> ////////////////////<li/class="divider"></li> ////////////////////<li><a/href="#">Enough/with/the/Latin</a></li> ////////////////</ul> ////////////</li> //////////</ul> ////////</div> ////</div> </div>
Note that you will want to compensate for the bars 40-pixel height at the top of your page, otherwise it will
10/25/11 4:38 PM
overlap the first elements on your page.
Tabs and Pills

Tabs and pills are insanely easy to create, as they are just regular old lists. Of course, they dont function Bootstrap is all about the styles. Simply construct your list with the tabs class for the tabbed interface, or the pills class for the pill tabs. Like in the navigation bar in the previous section, adding the active class to a list item will highlight it. For the tab switcher, use something similar to this: 1 2 3 4 5 6 7 <ul/class="tabs"> //<li/class="active"><a/href="#">Lorem</a></li> //<li><a/href="#">Ipsum</a></li> //<li><a/href="#">Dolor</a></li> //<li><a/href="#">Sit</a></li> //<li><a/href="#">Amet</a></li> </ul>
To use pills instead, swap out the top line for the following. 1 <ul/class="pills">
Pagination
We now move onto pagination, which is functionless (like the tabs and pills), but is still styled in Bootstrap. Bootstrap handles pagination buttons the same tabs, in a list which this time is wrapped in a <div> with the pagination class. Each list item can have a linked number in it (or an ellipsis), apart from the first and last items which are reserved for the prev/next links. These have the prev and next classes, respectively. Additionally, any button can be disabled by adding the disabled class, and the active link is highlighted with the active class. Like so:
10/25/11 4:38 PM
01 02 03 04 05 06 07 08 09 10 11
<div/class="pagination"> ////<ul> ////////<li/class="prev/disabled"><a/href="#">Prev</a></li> ////////<li><a/href="#">1</a></li> ////////<li><a/href="#">2</a></li> ////////<li><a/href="#">3</a></li> ////////<li><a/href="#">4</a></li> ////////<li><a/href="#">5</a></li> ////////<li/class="next"><a/href="#">Next</a></li> ////</ul> </div>
Alerts and Error Messages

Alert bars are visually very similar to buttons, although they are constructed differently. Every error message is a <div> tag with the alert-message class. There are four different types of message, each with a corresponding class that must also be added:
warning for a yellow bar error for a red bar success for a green bar info for a blue bar
Alert messages are then written as follows, selecting only one class from warning/error/success/info. 1 2 3 4
<div/class="alertYmessage/warning/error/success/info"> ////<a/class="close"/href="#">×</a> ////<p><strong>Lorem/ipsum</strong>/dolor/sit/amet,/consectetur/adipiscing/elit. </div>
Just for your information, the second line of the code above adds the to the right of the alter message, which could be linked to an action removing the message.
Page 15 of 20
10/25/11 4:38 PM
Alerts dont need to be a one line affair either. If your message extends beyond a single line, simply add the block-message class to the code youd use for a single line, while still using the different type classes. 1 2 3 4 <div/class="alertYmessage/blockYmessage/warning/error/success/info"> ////<a/class="close"/href="#">×</a> ////<p><strong>Lorem/ipsum</strong>/Fusce/interdum/euismod/tempor...</p> </div>
These messages are also able to hold buttons, useful if the alert needs to be resolved with a choice. If you check back to our section on buttons, youll know how to add these. Just make sure to use the small versions, by adding the small class to the button itself, and wrap it in a <div> tag with the alert-actions class. 1 2 3 4 5 6 7 8
<div/class="alertYmessage/blockYmessage/warning/error/success/info"> ////<a/class="close"/href="#">×</a> ////<p><strong>Lorem/ipsum/dolor/sit/amet!</strong>/Fusce/interdum/euismod/tempo ////<div/class="alertYactions"> ////////<a/href="#"/class="btn/primary/small">Lorem/ipsum/dolor</a> ////////<a/href="#"/class="btn/small">Sit/amet</a> ////</div> </div>
Modals
Modals can be useful to show information in certain scenarios, commonly used for inputting data such as user information, or posts. Bootstraps modal is fairly simple, and is split into three sections; the header, the body and the footer. First, we start off by opening the modals <div> tag, and positioning it with some in-line styles that Bootstrap requires.
Page 16 of 20
10/25/11 4:38 PM
<div/class="modal"/style="position:/relative;/top:/auto;/left:/auto;/margin:/0/a
Inside that tag, we then place the three sections, the first being the header. The header has a class of modalheader and includes just two lines, an <h3> tag for the title, and the (optional) linked that can be customized to close the popover. 1 2 3 4 <div/class="modalYheader"> ////<h3>Lorem/ipsum</h3> ////<a/href="#"/class="close">×</a> </div>
Next up, we have the main body of content. Its very simple, being just a <div> with the modal-body class, and your content inside. As so: 1 2 3 <div/class="modalYbody"> ////<p>Lorem/ipsum/dolor/sit/amet</p> </div>
Finally, we have the modal footer (another <div>, this time with the modal-footer class) that generally consists of buttons to take action from. These are generated in exactly the same way as all the other buttons weve created with Bootstrap, so they need no additional explaining. 1 2 3 4 <div/class="modalYfooter"> ////<a/href="#"/class="btn/primary">Lorem/ipsum/dolor</a> ////<a/href="#"/class="btn">Sit/Amet</a> </div>
Okay, I lied. That wasnt the final step. We still need to close off the original <div>. 1 </div>
Put all these parts together as one, and you get a pretty sweet modal window. Unfortunately, as I keep reminding you, Bootstrap is literally handling the styling here; the modal wont actually appear as if its popped over. It would be awesome if Bootstrap expanded to have some functionality in addition to the CSS, but for the moment youll have to generate or source your own.
Final Thoughts
10/25/11 4:38 PM
The image above shows our final design. It consists of all the elements weve created in this tutorial (theres a seperate demo for the form elements), entirely within the scope of Bootstrap. Hopefully this article has been of use to you, especially since it can be difficult for some to decipher the included example page (which acts as the only documentation included in the download). I love Bootstrap. If youre new to web development, it provides a great range of elements to use, although your site might end up looking a bit too Twitter-ish through a lot of shared elements. Nonetheless, the simplicity and ease of use is too difficult to ignore if you dont want to/cant write your own. I cant wait to try and use some of this stuff in a new project.
Additional Resources
Using Less CSS, BluePrint and WP for a Faster Workflow Wptuts+ Quick Tip: Never Type a Vendor Prefix Again Nettuts+ Bootstrap From Twitter Is A New Web Designers Dream Web AppStorm
Like 17 people like this. Be the first of your friends.
Page 18 of 20
10/25/11 4:38 PM
Tags: bootstrapcssframeworktool kittwitter
By Connor Turnbull
This author has yet to write their bio.
Page 19 of 20
10/25/11 4:38 PM
Page 20 of 20

Stepping Out With Bootstrap From Twitter - Web Design Tuts+

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Stepping Out With Bootstrap From Twitter - Web Design Tuts+

Uploaded by

Copyright:

Available Formats

Stepping Out With Bootstrap from Twitter | Webdesigntuts+