Skip to main content

Bootstrap: Part2: Understanding Grid System




Bootstrap is using grid system to assign width to html element. This gird system is based on 12-equal-units, means grid is like a container which consist of 12-logical units.
   If we want to divide our page into 2 equal parts then we can use this grid-system by assigning 6-logical units to each part of the page, and it can be done with the help of CSS class (.col-xx-N)

 CSS class being used for grid system is of the forms ".col-xx-N" where "xx" denotes the screen size "N" denotes the no. of logical unit

There are 4 different kind of "xx" based on your screen size
   
col-lg   (large for larger desktops)
col-md (medium for desktops)
col-sm (small for tablets)
col-xs  (extra small for phones)

Here are some examples for visualizations

With equal width

.col-xx-12
.col-xx-6
.col-xx-6
.col-xx-4
.col-xx-4
.col-xx-4
.col-xx-3
.col-xx3
.col-xx-3
.col-xx-3
.col-xx-2
.col-xx-2
.col-xx-2
.col-xx-2
.col-xx-2
.col-xx-2









With un-equal columns:

.col-xx-8
.col-xx-4
.col-xx-3
.col-xx-4
.col-xx-5
.col-xx-10





Columns with offset
.col-xx-8 .col-xx-2-offset

.col-xx-2

.col-xx-7 .col-xx-offset-2







Labels:

Comments

Post a Comment

Popular posts from this blog

EFCore - Collate function

Search in SQL server query is generally case insensitive (by default or based on database level collation). Suppose we have an employees table with a row having first-name column value as "My-First-Name", so if we want to do the case-sensitive search we have to explicitly use the related collate: In EF 5 (currently in Release Candidate version [RC.2.20475.6]) Collate function got introduced which helps us to use our specific collation based search.  C# with EF5 code sample: var employeeCaseSensitiveSearch = _dbContext.Employees .Where(x => EF.Functions.Collate(x.FirstName, "Latin1_General_CS_AS") == "my-first-name") .FirstOrDefault(); A related database query will be something like this: T-SQL: Case sensitive search (use specific collation e.g.: Latin1_General_CS_AS) SELECT * FROM dbo.Employees AS e WHERE e.FirstName Collate Latin1_General_CS_AS = 'my-first-name' Some of the useful CSharp function which g...
Post a Comment
Read more

Git - Update submodule

Sometimes in the large project when we separate it in different repositories we need to take reference of one repository in another where some the sub-module concepts. Now if we move our submodule to a different repository or renaming its repo-path then we've to also update the repository where this sub-module is getting referenced. Let's see how to update the git submodule.  Step-1: First clone the repo Step-2: Open git UI to create a new local branch from master  Step-3: Open git bash -- Now run below command to (remove submodules & add them):  -- Remove submodule git submodule deinit YOUR_FIRST_REPO git rm YOUR_FIRST_REPO git commit -m "Removed submodule YOUR_FIRST_REPO" rm -rf .git/modules/YOUR_FIRST_REPO -- Add submodule git submodule add <<..YOUR_FIRST_REPO git URL>> Step-4: All good, let's push our changes to the master
Post a Comment
Read more

EFCore - Update command is not updating the underlying data

Why my update command using EFCore is not updating the underlying data in the database though in middle-tier code it's successful, not throwing any error? Let's try to get the root cause and how to solve this.  When creating the model class of related database object if the primary key name is Id then no need to explicitly mention the Key in ef-core OnModelCreating.  But if we've key name different from Id then we have to explicitly mention it in our OnModelCreating. Something like this:  entity.HasKey(c => new {c.CustId }); Assume in the database we've Customers table like this: CREATE TABLE [dbo].[Customers]( [CustId] [INT] IDENTITY(1,1) NOT NULL Primary Key, [FirstName] [VARCHAR](50) NULL ) Point to ponder: In the database table, column CustId is already defined as Primary key.  In EFCore model setup, it's up to us to configure the Key as (custId) or configure it as HasNoKey() Assume we've set our entity with Ha...
Post a Comment
Read more