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

Azure SQL - AAD Authentication from you client application in user context

When we try to migrate our IaaS SQL to Azure SQL along with other code changes & refactoring, one of the most prominent things that come into the picture is Authentication through a client application (web app or windows form, excel-add-ins...). With IaaS/OnPrem SQL we could use Windows Authentication to let your client application interact with the SQL server with the user's context. But to Azure SQL we can't do the Windows Authentication and also we should avoid SQL-based login (user/password). To login to Azure SQL, it's always preferable to use Azure Active Directory-based authentication (integrated flow, MFA, or AAD based password). Now the problem comes how to achieve this with your client application. The solution to this problem statement is, u se AAD app with delegated permission to access the users' claim [email, sid] in access token & configure it based on your client (e.g. windows form, web application) Here are ...

EFCore - Scaffold-DbContext how to use

EFCore versions, we don't have GUI to manage the DB-entities & dbContext like we used to have with EF6 (or EF5/4 version). With EFCore we've the Scaffold-DbContext command which helps us to create entities & DB context from our DB-objects. Let's see how to use Scaffold-DbContext: Assume we're connecting with SQL Server so after creating a sample project you'll have to install EFCore related libraries as mentioned below. Install entity-framework-core for SQL Server, at this time 3.1.9 is the latest stable version Microsoft.EntityFrameworkcore Microsoft.EntityFrameworkCore.SqlServer To use Scaffold-DbContext, following two NuGet packages are required Microsoft.EntityFrameworkCore.Tools Microsoft.EntityFrameworkCore.Design Let's say we've two DB tables (e.g. dbo.Employees & dbo.Users ) Now let's see how to use Scaffold-DbContext to create c-...

Data Tips & Tricks

Search This Blog