First, we should understand that, unlike previous pages that are usually built using a table, we will build our website using "div" tags. These tags should have classes of all different types in Bootstrap.
NOTE: Keep in mind that the examples throughout this section of the website is examples of code IN YOUR BODY TAG. If this doesn't make any sense to you, it is STRONGLY recommended that you visit both the HTML guide AND the CSS guide for a better understanding.
We can start by adding a div tag with a class of "container". Our page should look something like this:
Once you have your container for your page, we can start adding rows. You can view these as table rows if you wish. These rows are to help build a table layout for your page. However, it can be extremely helpful to have an idea of how your page will look once you reach the phone size. With that being said, let's add a total of three rows!
Once we have three rows, we can add columns to these rows. These columns may change width depending on the device that you are on. For example, you may want a page to have three columns of information on a desktop computer. However, once you hit a portrait tablet the text might be a bit too small. In this case, it would be better to use two columns instead of three. Finally, one column is always a good choice when you get down to portrait phone!
To define how many columns you want at a certain screen size, we use CSS classes provided to us from Bootstrap. These always have a certain structure to the class name. The structure is "col-", followed by the two-lettered size (xs, sm, md, or lg), followed by another "-", and finally the number of columns this will be spread across. For our example, the code may look like this:
Notice that I use more than one column class on each div. This is to represent the different columns at different screen sizes. By using "col-lg-4" I am saying that all three of these should be 4 columns wide, for a total of 12 columns on a large screen size. Once we reach the small size, "col-sm-6" is saying that each tag will be 6 columns wide on a small screen size. Finally, the "col-xs-12" says that the information will be all 12 columns wide on an extra small screen size. Also notice that even though I did not define the medium screen size, it will inherit the small CSS screen size.
Now that you have a basic understanding of the Bootstrap framework, please play around with it to understand it better. This framework is loaded with a large amount of CSS and JavaScript framework, and is always a wonderful addition to any website!
Previous