gasilmojo.blogg.se - Twitter bootstrap grids

A column has a 15px padding (shown in pink), which touches the edge of the container (due to negative margin on row), thus behaves similar to a container. container-fluidĪ row must have columns that add up to 12. This is necessary for columns to work correctly as we’ll see later.ĭo not use.

A row has a negative margin of 15px on both sides (shown in green) which negates the 15px padding provided by the container. The columns must add upto 12 within a row. container-fluidĪ row serves as a wrapper for columns.

Responsive Container: It provides a width constraint to content depending on the width of the browser.

Fluid Container: As the name suggests, it always spans the entire width of the browser.

There are two types of containers available in bootstrap:

To provide padding to the content (shown in blue), so that they do not stick to the edge of the browser.

To provide width constraint on resonpsive widths.

The container is the foundation of the grid. The grid consists of mainly three components, namely: container, row and columns. I’ve been perplexed at times by the grid system and how it works? There might be other people out there who face similar problems. But that is a whole other topic for discussion.įor now let’s just focus on the topic we have on our hands right now.

First is semantics and the other is bloat. Although many websites use bootstrap in production, I will not recommend using it directly in production for two reasons. It’s a great tool to quickly create a mock-ups. It is very easy to get started with and can greatly speed up one’s workflow. Twitter bootstrap is one of the most well-known frontend framework out there on the web.