Bs Grid System

-

Bootstrap Grid System

Bootstrap Grid System

Bootstrap's grid organisation allows upwards to 12 columns across the page.
If y'all practise non want to purpose all 12 column individually, y'all tin grouping the columns together to practise wider columns:
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12
Bootstrap's grid organisation is responsive, in addition to the columns volition re-arrange depending on the covert size: On a big covert it mightiness expect amend alongside the content organized inwards 3 columns, simply on a modest covert it would hold upwards amend if the content items were stacked on tiptop of each other.
Tip: Remember that grid columns should add together upwards to twelve for a row. More than that, columns volition stack no affair the viewport.

Grid Classes

The Bootstrap grid organisation has 4 classes:
  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for modest laptops - screens equal to or greater than 992px wide)
  • lg (for laptops in addition to desktops - screens equal to or greater than 1200px wide)
The classes to a higher house tin hold upwards combined to practise to a greater extent than dynamic in addition to flexible layouts.
Tip: Each shape scales up, in addition to hence if y'all wishing to laid the same widths for xs in addition to sm, y'all alone require to specify xs.

Grid System Rules

Some Bootstrap grid organisation rules:
  • Rows must hold upwards placed inside a .container (fixed-width) or .container-fluid (full-width) for proper alignment in addition to padding
  • Use rows to practise horizontal groups of columns
  • Content should hold upwards placed inside columns, in addition to alone columns may hold upwards immediate children of rows
  • Predefined classes similar .row and .col-sm-4 are available for rapidly making grid layouts
  • Columns practise gutters (gaps betwixt column content) via padding. That padding is offset inwards rows for the outset in addition to final column via negative margin on .rows
  • Grid columns are created past times specifying the release of 12 available columns y'all wishing to span. For example, 3 equal columns would purpose 3 .col-sm-4
  • Column widths are inwards percentage, in addition to hence they are ever fluid in addition to sized relative to their nurture element

Basic Structure of a Bootstrap Grid

The next is a basic construction of a Bootstrap grid:
<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>
So, to practise the layout y'all want, practise a container (<div class="container">). Next, practise a row (<div class="row">). Then, add together the desired release of columns (tags alongside appropriate .col-*-* classes). Note that numbers inwards .col-*-* should ever add together upwards to 12 for each row.

Grid Options

The next tabular array summarizes how the Bootstrap grid organisation plant across multiple devices:
  Extra small
<768px		 Small
>=768px		 Medium
>=992px		 Large
>=1200px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Suitable for Phones Tablets Small Laptops Laptops & Desktops
Grid behaviour Horizontal at all times Collapsed to start, horizontal to a higher house breakpoints Collapsed to start, horizontal to a higher house breakpoints Collapsed to start, horizontal to a higher house breakpoints
Container width None (auto) 750px 970px 1170px
# of columns 12 12 12 12
Column width Auto 62px 81px 97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Examples

The side past times side chapters shows examples of grid systems for unlike devices:
  • Stacked-to-horizontal
  • Small devices
  • Medium devices
  • Large devices
  • More grid examples

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more