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

Comments

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...

EFCore - Parallel db call on same dbContext

Practically there are multiple instances when we want to do parallel DB call which will save us some time. Like if we want to get a few employees details as well as users detail and if both entities are independent of each other better to go with a parallel call to fetch the details. With the growing ORM usage and enhanced & optimized framework of like EFCore, in most of the application (related to C# development), we generally prefer to use EFCore. With EFCore if we try to use the same DB context to do parallel db call we are getting an error (... different thread using the same DbContext....). Because dbContext call is not thread-safe Parallel DB call on the same dbContext: Code snipped: which will throw an error private void DbCallWithParallelCallOnSameDbContext() { try { var employeesTask = _dbContext.Employees.ToListAsync(); var usersTask = _dbContext.Users.ToListAsync(); ...

How to install Zen-coding plugin

As a web-developer, irrespective of the technologies (java, c-sharp, python, php e.t.c.…), we used to write CSS code to make our web-pages looks good if not at least we’re involved in write html codes. What if there is some tool to whom you give some instruction and that tool generates a good, well formatted html tags for you. These kind of coding is possible and known as “ Zen coding ” and there are lots of plug-in available from different vendors. We’re going to discuss the steps to install this “zen-coding” plugin for “visual studio, eclipse, sublime-text & notepad++ in next few lines. Follow the below steps to install "zen-coding" plugin based on your editor. Steps to install zen-coding plugin for (visual studio, eclipse, sublime-text,notepad++) -- -- For Visual Studio 1. Go to "Tools" -> "Extensions and Updates" 2. It'll open the "Extensions and Updates windows" Select online form Left hand menu items ent...

Data Tips & Tricks

Search This Blog