COMMON BOOTSTRAP STARTING CLASSES

COMMON BOOTSTRAP STARTING CLASSES

When putting together the layout for a page, there are a few classes that you typically use to start. The first two help define how much space the content will take on the overall page, while the last will allow you to highlight content, such as the site’s title and introductory information.

container The container class places content inside of a horizontal container. The size of the container will vary based on screensize. The container will stay the same width for that particular screensize. This helps developers size content appropriately for different devices.
container-fluid The container-fluid class places content inside of a container that will always be the width of the screen. This is helpful for scenarios where the content to be displayed must use the entire browser window.
jumbotron The jumbotron class is a common class for displaying titles for different sections of a website, or the landing page. The jumbotron typically has a highlighted background and an increased fontsize.

 

 

 

GRID NOTES

  • Always 12 columns
  • Smaller sizes set the default for larger sizes
    • col-sm- would set the size for small, medium and large screens unless overridden by a setting specific to one of the larger sizes
  • There is a 30px “gutter”, or empty space, between each column (15px on each side of the column)
  • The gutter on the outside of the container varies based on the current screen size
    • Extra small devices always use the entire width of the screen
  Extra small devices

e.g. phones

(< 768 px)

Small devices

e.g. tablets

(≥ 768 px)

Medium devices

e.g. laptops

(≥ 992 px)

Large devices

e.g. desktops

(≥ 1200 px)

Container width None (auto) 750px 970px 1170px
Column class prefix col-xs- col-sm- col-md- col-lg-
Column width Auto 60px 75px 95px

The screens sizes that Bootstrap uses are not random, but rather based on research on common device sizes. While you can change the screen sizes, because Bootstrap does use CSS, you want to use the defaults provided.

 

 

GRID SIZE CLASSES

Structure of Bootstrap classes for sizing grid content

  • col
    • Short for column
    • Required prefix
  • size abbreviation
    • xs for Extra small
    • sm for Small
    • md for Medium
    • lg for Large
  • Number of columns
    • Integer to represent the number of columns

EXAMPLES

Let’s take a look at a couple of sample Bootstrap content sizing classes:

  • col-md-4 would indicate 4 columns for medium and large screens
  • col-sm-6 would indicate 6 columns for small, medium and large screens
  • col-xs-2 would indicate 2 columns for extra small, medium and large screens

Remember that screen size rules apply for the specified screen size as well as those larger than that size, unless overriden. So the following combination would indicate 2 columns for extra small screens, 6 columns for small screens, and 4 for medium and large screens.

Content

 

 

Nesting columns

The Bootstrap grid system allows developers to lay out their pages using a system that’s similar to tables, but uses CSS positioning instead of tables behind the scenes. One feature tables offer is the ability to create tables inside of a cell, so you can create complex layouts through what’s frequently referred to as “nesting”. The grid system offers the same capability.

Every row you create has 12 columns, regardless of where that row is created. If you create a section of content, and then add a row inside of there, that row has 12 columns.

Let’s take the following HTML example.

Sample content here

</div>

In that example, we would have created a section for content that is 6 columns wide, or half of the container. If we then added a new row into that space, replacing the sample content, we’d have a brand new 12 columns. However, those new columns would only take up half of the container, as they are inside of a section that is constraining it to 6 initial columns.


</div>
</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s