Tag Archives: bootstrap

Columns

Setting up columns with Bootstrap

Twitter Bootstrap has made it easy to create columns for your webpage content.  They have included a responsive grid system that scales and uses a 12 column grid system more accurately called a mobile first fluid grid system.

Bootstrap has taken the smallest screen and created their code accordingly.   This is good because you can scale your website from a  extra small smartphone screen to a full-size desktop screen.

So, to get started.  In CSS write a containing element that looks like this:

.container-row {
padding: 0 15px;
margin: 0 -15px;
}

You want these margins and padding so the content  can be fully fluid and stretch with the screen size.

Then code the following on your page:

<div class=”container-row”>
<div class=”row”>
<div class=”col-xs-? col-md-?”>

With ? being the number you want to have the column span over -up to a total of 12 (full length of screen).  The first class=”col-xs-?” is meant for a ‘extra small’ (mobile) screen.  The second “col-md-?” is for a mid size screen.  You want these separated because it will make your code fluid with all screen types.  On a very small screen you most likely won’t be able to fit  a lot of content using half of the screen but on a mid to large size screen, half  of the screen would be ample room for lots of content.  This is bootstrap moving forward with the mobile first agenda.

Now place your content on the page, end it with a </div> and it will display in the first column you created.

Two or more columns

To set up more than one column, designate the first column as less than 12 and use the remaining amount (up to 12) as the second column for each size of screen.  Here’s the example:

<div class=”container-row”>
<div class=”row”>
<div class=”col-xs-12 col-md-8″>
<div class=”col-xs-6 col-md-4″>

Let’s look at the “col-md-?” part of the code.  This is referring to a mid size screen and the code  “col-md-8” and “col-md-4” totals 12.  Further, it would have 3/4 of the page set as the first column and the last 1/4 as a second column.

But here it get a bit tricky. The extra small screen has a 12 on the col-xs-12 and that would be considered full screen with no space for a second column.  Bootstrap says to be able to stack columns on the mobile you use one full-width column and the second is half-width.  For further explanation click here.

After the final column of content is added, end with </div> and  you should have it made!

For further information, coding examples and as a reference, see Bootstraps Grid System page.

 

Developing a Website with Twitter Bootstrap

Developing a website from scratch is no easy task…but it’s all part of the adventure.

We started our website using a user friendly CSS html interface called Twitter Bootstrap.  You can find and download it here:  Twitter Bootstrap.

The Bootstrap website has useful information about getting started, css (cascading style sheets), components and an overview of the JavaScript.  Also, there is a customize button that shows you how to customize parts of the code you want to download for what you want on your website.

 

Getting Started:

Getting started with Bootstrap can be done in a few ways that are outlined on the website.  The user can decide and implement templates and different content definitions.   Bootstrap lays is all out here.

 

CSS:

Bootstrap has a Grid system that is responsive to your mobile size and will scale to the appropriate device.  It easily displays lists, addresses, and other typography benefits.  It will make tables, basic forms and buttons.  With a small amount of time  learning this coding system you will be able to display your webpage in an orderly and concise way.  Check out all the info on CSS here.

Components:

Glyphicons, dropdowns, button groups (quick link), navbar, labels, badges, headers, and thumbnails are just a few of the things that are readily available in Bootstrap.  Check them out.

JavaScript:

I have to say my favorite part of the code is the Carousel options.  It puts movement into the webpage.  It’s great for advertising or displaying something that you really want to grab the attention of the viewer.  Read about it here.

 

Go Customize:

You can customize what you download in your bootstrap.  If you aren’t sure, they will gently lead you back to the ‘CSS’ or ‘Components’ aspects of the website to help you know what you want.

So, check it out.  It’s a great way to get started.  Twitter Bootstrap! 

 

Recommended videos and informational websites:

w3resource

Tutorial – Twitter Bootstrap

lynda.com