BOOTSTRAP : CONTROLLING PLACEMENT

CONTROLLING PLACEMENT

The ability to resize content based on screen size is extremely powerful. It allows you to ensure that the most relevant information is readily available to the user on a page, regardless of the size of device.

But there's more to optimizing display for different device types than just changing the size. Sometimes you need to move content higher up on the page, such as a product name, or a "Buy it now!" button. In other scenarios, you need to push content down, such as detailed information, which isn't necessarily as important to someone just browsing your page. In fact, you might even need to just hide it all together.

Bootstrap offers you complete control over the size, and placement, of content, across all devices.

You can use three main options for controlling placement in Bootstrap. Each option has a syntax similar to sizing content. You'll start with col, followed by the abbreviation for the screen-size, followed by the option, and then the number of columns. For example, you can move content to the right 6 columns on extra small screens by using col-xs-push-6. Here are the options available to you:

• offset
• Offset will instruct Bootstrap to skip the specified number of columns before placing content. With offset, the skipped columns will be left blank.
• push
• Push will instruct Bootstrap to move content to the right a specified number of columns. With push, the columns that were left blank can be used by pulling content to the left.
• pull
• Pull will instruct Bootstrap to move content to the left a specified number of columns. With pull, the columns that were left blank can be used by pushing content to the right.