Skip to main content

Bootstrap - 03

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content.
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
 span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
  • Rows must be placed within a .container class for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within the columns, and only columns may be the immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
Example :
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Grid Classes

The Bootstrap grid system has four classes:
  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
  Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12 12 12 12
Max column width Auto 60px 78px 95px
Gutter width 30px 30px 30px 30px
       
(15px on each side of a column) (15px on each side of a column) (15px on each side of a column) (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Comments

Post a Comment

Popular posts from this blog

Use Log4Net in C# windows form Application

we are going to learn on how to use the Log4Net library for creating logs. Create a new windows form application in VS. Install Log4Net library Add to AssemblyInfo.cs  Configure in  App.config Use in code  Install Log4Net library Then install the Log4Net library from the Nuget Package library.           log4net by The Apache software foundation 2.0.8 (i installed the latest). Add to AssemblyInfo.cs  After installing this package, open up AssemblyInfo .cs file under the Properties folder and add the log4net assembly information into it (under the other assembly information.).    [assembly: log4net.Config.XmlConfigurator(Watch= true )]  Configure in  App.config Now, open the App.config file and enter required details for LogNet to work. <configSections>       <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net, Version=1.2....
1 comment
Read more

#MVC : Why does Html.Label() not work with periods? or Why is @Html.Label() removing some characters

You are misusing the  Html.Label  method. It is for: Returns an HTML label element and the  property name of the property  that is represented by the specified expression. That's why it gets confused if you have a point  .  in the first parameter because it expects a property expression there. However, you can use the second overload: @Html . Label ( "" , String . Format ( "{0}. someText" , 1 )) Or just write out the HTML: <label> @String . Format ( "{0}. someText" , 1 )</ label > or <label class="WelcomeText" style="float: left">Welcome @Html.Label("", Model.USERID + " ( " + Model.ROLE + " )", new { @class = "WelcomeText" })</label> 
Post a Comment
Read more

#SQL CTE(Common Table expressions)

SQL Server 2005 and on wards, a very powerful feather has been added for the programmers' benefit called CTE. CTE is again a temporary result set derived from the underling definition.  Common Table Expressions offer the same functionality as a view, but are ideal for one-off usages where you don't necessarily need a view defined for the system. CTE offers the advantages of improved readability and ease in maintenance of complex queries . The query can be divided into separate, simple, logical building blocks. These simple blocks can then be used to build more complex, interim CTEs until the final result set is generated. Common Table Expression Syntax A Common Table Expression contains three core parts: The CTE name (this is what follows the WITH keyword) The column list (optional) The query (appears within parentheses after the AS keyword) The query using the CTE must be the first query appearing after the CTE. Syntax : WITH expression_name [ ( column_n...
Post a Comment
Read more