Airo Global Software

What is bootstrap?

Bootstrap is an available and open-source CSS framework aimed at responsive, mobile-first front-end web development. It includes CSS- and javaScript-established design templates for typography, forms, buttons, navigation, and other components.

What is the bootstrap grid?

The Bootstrap Grid System is used for layout, especially Responsive Layouts. Recognition of how it operates is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more containers. The Bootstrap Grid can be used only, without the Bootstrap JavaScript and other CSS Elements. You are just required to download and reference the “bootstrap-grid.css” which includes the Grid and Flexbox classes. More info on only doing the Bootstrap Grid CSS.

Here’s the most general example of using the Grid:

< div class="container">
  < div class="row">
     < div class="col">I'm your content in the grid! < /div>
  < /div>
< /div>

What are the different types of bootstrap grid systems?

Bootstrap grid is a great system for creating mobile-first layouts. It's a very extensive tool with a large number of benefits. Below we give you the core principles. It's an uncomplicated overview of the most generally used examples. Bootstrap’s grid system uses a set of containers, rows, and columns to design and align content. It’s built with a flexbox and is fully active.

What are the basic examples of a bootstrap grid system?

Below is an illustration and an in-depth explanation of how the grid system comes together.

< div class="container"> 
< div class="row">
 < div class="col-md"> One of three columns < /div> 
< div class="col-md"> One of three columns < /div> 
< div class="col-md"> One of three columns < /div> < /div> < /div>

The above example produces three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent .container.

Taking it to step by step:

Container

Bootstrap needs a containing component to wrap site contents and house our grid system. Without a container, the grid won't operate properly.

Row

Rows build parallel groups of columns. Therefore, if you need to break your layout horizontally, use row.

Columns

Bootstrap's grid system allows up to 12 columns across the page.

How does it work?

Breaking it down, here’s how the grid system comes together:

• Our grid supports six responsive breakpoints. Breakpoints are based on min-width media questions, meaning they assume that breakpoint and all those preceding it. This means you can constrain container and column sizing and behaviour by each breakpoint.
• Containers horizontally pad your content. Use .container for a responsive pixel width, .container-fluid for width: 100% across all viewports and devices, or a responsive container for the mixture of fluid and pixel widths.

• Rows are covers for columns. Each column has horizontal padding for controlling the space between them. This padding is then checked on the rows with negative margins to defend the content in your columns is visually arranged down the left side. Rows also hold transformer classes to consistently apply column sizing and gutter classes to improve the spacing of your content

• Columns are amazingly flexible. There are 12 template columns free per row, allowing you to perform different sequences of components that traverse any number of columns. Column classes show the number of template columns to span. widths are set in sections so you always have the same corresponding sizing.

• Gutters are also warm and customizable. Gutter classes are open across all breakpoints, with all the same areas as our margin and padding spacing. Change regular gutters with .gx-* classes, upright gutters with .gy-*, or all gutters with .g-* classes. .g-0 is also available to switch gutters
• Sass variables, maps, and mixins power the grid. If you don’t need to use the predefined grid properties in Bootstrap, you can do our grid’s origin Sass to build your own with more semiotic markup. We also add some CSS custom properties to consume these Sass components for even larger flexibility for you.

What are the most common examples?

A few of the most popular grid layout examples to get you close with construction within the Bootstrap grid system.

Five grid tiers

There are five Bootstrap grid system, one for each range of devices we support. Each tier creates at a minimum viewport size and default to the greater systems unless overridden.

< div class="row">
  < div class="col-4">.col-4< /div>
  < div class="col-4">.col-4< /div>
  < div class="col-4">.col-4< /div>
< /div>
< div class="row">
  < div class="col-sm-4">.col-sm-4< /div>
  < div class="col-sm-4">.col-sm-4< /div>
  < div class="col-sm-4">.col-sm-4< /div>
< /div>
< div class="row">
  < div class="col-md-4">.col-md-4< /div>
  < div class="col-md-4">.col-md-4< /div>
  < div class="col-md-4">.col-md-4< /div>
< /div>
< div class="row">
  < div class="col-lg-4">.col-lg-4< /div>
  < div class="col-lg-4">.col-lg-4< /div>
  < div class="col-lg-4">.col-lg-4< /div>
< /div>
< div class="row">
  < div class="col-xl-4">.col-xl-4< /div>
  < div class="col-xl-4">.col-xl-4< /div>
  < div class="col-xl-4">.col-xl-4< /div>
< /div>

Three equal columns Get three equal-width columns starting at desktops and scaling to great desktops. On devices, tablets and below, the columns will default stack.

< div class="row">
  < div class="col-md-4">.col-md-4< /div>
  < div class="col-md-4">.col-md-4< /div>
  < div class="col-md-4">.col-md-4< /div>
< /div>

Three unequal columns

Get three columns begins at desktops and scaling to multiple widths. Don’t forget, grid columns should include up to twelve for a single block. More than that, and columns create stacking no matter the viewport.

< div class="row">
  < div class="col-md-3">.col-md-3< /div>
  < div class="col-md-6">.col-md-6< /div>
  < div class="col-md-3">.col-md-3< /div>
< /div>

Two columns

Get two columns creating at desktops and scaling to great desktops.

< div class="row">
  < div class="col-md-8">.col-md-8< /div>
  < div class="col-md-4">.col-md-4< /div>
< /div>

Two columns with two nested columns

nesting are simple—just put a row of columns within an existing column. This provides you two columns scaling to large desktops, with another two within the larger column.

At mobile machines sizes, tablets and down, these columns and nested columns will stack.

< div class="row">
  < div class="col-sm-6 col-lg-8">.col-sm-6 .col-lg-8< /div>
  < div class="col-6 col-lg-4">.col-6 .col-lg-4< /div>
< /div>
< div class="row">
  < div class="col-6 col-sm-4">.col-6 .col-sm-4< /div>
  < div class="col-6 col-sm-4">.col-6 .col-sm-4< /div>
  < div class="col-6 col-sm-4">.col-6 .col-sm-4< /div>
< /div>

Mixed: mobile and desktop

The Bootstrap v5 grid system has five t classes: xs, small, medium, large, and extra-large. You can use almost any mixture of these classes to build more dynamic and suitable layouts.

Each classes scales up, meaning if you plan on setting the equal widths for md, lg and xl, you only require to md.

< div class="row">
  < div class="col-md-8">.col-md-8< /div>
  < div class="col-6 col-md-4">.col-6 .col-md-4< /div>
< /div>
< div class="row">
  < div class="col-6 col-md-4">.col-6 .col-md-4< /div>
  < div class="col-6 col-md-4">.col-6 .col-md-4< /div>
  < div class="col-6 col-md-4">.col-6 .col-md-4< /div>
< /div>
< div class="row">
  < div class="col-6">.col-6< /div>
  < div class="col-6">.col-6< /div>
< /div>

Containers

Additional included classes in Bootstrap make containers that are wide until a particular breakpoint.

< div class="container">.container< /div>
< div class="container-sm">.container-sm< /div>
< div class="container-md">.container-md< /div>
< div class="container-lg">.container-lg< /div>
< div class="container-xl">.container-xl< /div>
< div class="container-xxl">.container-xxl< /div>
< div class="container-fluid">.container-fluid< /div>

If you have any doubt about this Bootstrap tutorial. If you want any software consultations and services, Don’t hesitate to contact us through the given email. Airo global software will always be your digital partner.

E-mail id: [email protected]

Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile:www.linkedin.com/in/johnsontaugustine/

We all understand that ASP.NET MVC is a great stage that allows us to build and maintain web applications in a much easier manner related to form-based web applications. There are a few things in MVC-based web applications that run a little more uncomfortably than standard web applications, one of them is routing.

Until now, there has been a routing table that you can set either in the Global. asax or in the RouteConfig.cs and all incoming calls would look it up to determine the rendering of a targeted view.

Here is the code that you might have seen previously to have note-variable routes in MVC 4 in the following example of the Route collection object.

routes.MapRoute( 
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Product",
action = "List", id = UrlParameter.Optional }
);

What is the necessity for this new routing methodology?

There was nothing really incorrect with the previous method of routing and in fact, you can however use it in MVC 5 or use this new routing method in connection with the old one.

Here are a few benefits of attribute-based routing,

• Helps developers in the debugging / troubleshooting form by providing data about routes.
• Decreases the chances for mistakes, if a route is changed incorrectly in RouteConfig.cs then it may affect the whole application's routing.
• May decouple controller and business names from route entirely.
• Simple to map two routes guiding to the same action.

Let's see specifically how we can configure it and see it working.

First, we will need to enable attribute-based routing on our MVC web application that can be made by only one line. All you want to do is put this line in the RegisterRoutes method of the application.

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
tes.MapMvcAttributeRoutes(); //Enables Attribute Based Routing
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Product", action = "List", id = UrlParameter.Optional }
);
}

Now, here is how you can use attribute-based routing on a particular action method.

[Route("products/{id?}")]
public ActionResult Details(string id)
{
if (string.IsNullOrEmpty(id))
{
return View("List", GetProductList());
}
return View("Details", GetProductDetails());
}

As shown in the method above, the Route is determined on a Details action method that lets users enter the product specifications page either by of these paths,

/Product/Details/Id or /products/id

You might have recognized the problem mark in the route above, all it means is that the id is an arbitrary parameter of the route and hence the business process logic checks if the id is null. It will show you the result listing page.

Route Prefixes

Route Prefixes are blank but the prefix for any route that we need to apply, all we need to do is to determine the route prefix on a controller so that all the action plans inside it can follow the prefix.

[RoutePrefix("products")]
public class ProductController : Controller  
{
//This will be translated to /products
[Route]
public ActionResult List()
{
return View();
}
//This will be translated to /products/2
[Route("{id?}")]
public ActionResult Details(string id)
{
if (string.IsNullOrEmpty(id))
{
return View("List");
}
return View("Details");
}
}

Route Constraints

Route constraints are zero but a set of practices that you can set on your routing model/parameters that users want to follow when entering the established routes.

The way to determine a constraint is by using the ":" character, let's have a look at the example below.

//route gets called as /products/productname
[Route("products/{id:alpha}")]
public ActionResult GetProduct(string name) 
{
return View();
}
//route gets called as /products/2  
[Route("products/{id:int}")]
 public ActionResult GetProduct(int id)
{
return View();
}

Now your strength has recognized in the example above that though the system name is equal the route's parameter has some restrictions on it. In other words, the first order will be called if the route is located with a string as a parameter and the second method will be called if the route is obtained with an integer in the route parameter.

You can also define your system route limitations using an IRouteConstraint interface.

Route Areas

A Route area is zero but the way to define the area in a route, essentially just to let the route know that the controller goes to some area.

[RouteArea("business")]
[RoutePrefix("products")]
public class ProductController : Controller
{
//This will be translated to /business/products/list 
[Route]
public ActionResult List()
{
return View();
}
}

If you have any questions about the above topic or have to get services and consultations and get the best ASP.Net MVC Application Development Services. Feel free to contact us. AIRO GLOBAL SOFTWARE will be your digital solution. E-mail id: [email protected].

Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/

ASP.NET Core Web APIs often need to serialize JSON data to JavaScript clients. On the server, your C# classes basically use Pascal Casing to name properties whereas JavaScript code uses Camel Casing for property names. Therefore it would be worthwhile to take a quick look at how ASP.NET Core serializes data in JSON form of Web API and MVC controllers.

There are three basic places from where C# objects are serialized in JSON format to the client:

• Web API controllers
• MVC controllers
• Custom C# code using JsonSerializer

How camel casing and web API?

Let's first see the behavior of ASP.NET Core Web APIs when it comes to JSON serialization.

Analyze the resulting Web API controller:

[ApiController]
[Route("[controller]")]
public class EmployeeController : ControllerBase
{
[HttpGet]
public List<Employee> Get()
{
List<Employee> empList =
new List<Employee>();
empList.Add(new Employee()
{ EmployeeID=1,FirstName="Nancy",
LastName="Davolio" });
empList.Add(new Employee()
{ EmployeeID = 2, FirstName = "Andrew",
LastName = "Fuller" });
 return empList;
}
}

This code simply returns a List of Employee objects to the caller. The Employee class practiced in this system looks similar this:

public class Employee
{
public int EmpID { get; set; }
public string First { get; set; }
public string Last{ get; set; }
}

Begin the Startup class and modify the ConfigureServices() step as shown below:

public void ConfigureServices
(IServiceCollection services)
{
services.AddControllers()
 .AddJsonOptions(options =>
{
options.JsonSerializerOptions
.PropertyNamingPolicy = null;
});
}

As you can understand, the code does the AddJsonOptions() way to configure this behavior. The PropertyNamingPolicy section of JsonSerializerOptions is set to nothing.

If you need to explicitly set the casing to camel casing then you can print:

options.JsonSerializerOptions.
ropertyNamingPolicy = JsonNamingPolicy.CamelCase;

How camel casing and MVC controllers?

In ASP.NET Core MVC you can use Json() method to serialize data JSON format. Consider the following work that explains how this can be done.

public class HomeController: Controller
{
public IActionResult Index()
 {
List<Employee> empList =
new List<Employee>();
empList.Add(new Employee() 
{ EmployeeID = 1, FirstName = "Nancy",
LastName = "Davolio" });
empList.Add(new Employee()
{ EmployeeID = 2, FirstName = "Andrew",
LastName = "Fuller" });
return Json(empList);
 }
}

The Index() action made a List of Employee objects. The easiest is then serialized to the client handling Json() method.

In order to show MVC to pause using camel casing, you can type this code in the ConfigureServices().

services.AddControllersWithViews()
 .AddJsonOptions(options =>
{
options.JsonSerializerOptions
.PropertyNamingPolicy = null;
});

You run the AddJsonOptions() step on AddControllersWithViews().

You can also replace this behavior for single Json() calls as shown below:

var options = new JsonSerializerOptions()
{
 PropertyNamingPolicy = 
JsonNamingPolicy.CamelCase
};
return Json(empList, options);

How is custom code using JSON serializer?

At times you are required to serialize data yourself via custom code. Basically, you will use JsonSerializer to perform this task. Examine the following code:

public IActionResult Index()
{
List<Employee> empList =
new List<Employee>();
empList.Add(new Employee() 
{ EmployeeID = 1, FirstName = "Nancy", 
LastName = "Davolio" });
empList.Add(new Employee() 
{ EmployeeID = 2, FirstName = "Andrew", LastName = "Fuller" });
string json = JsonSerializer.Serialize(empList);
return Ok(json);
}

If you need JsonSerializer class to do camel casing you can do the serving:

var options = new JsonSerializerOptions()
{
PropertyNamingPolicy = JsonNamingPolicy.CamelCase
};
string json = JsonSerializer.Serialize(empList, options);
return Ok(json);

As you can see, the code makes a JsonSerializerOptions object and sets PropertyNamingPolicy property to JsonNamingPolicy.CamelCase. Next, the Serialize() system is called by giving empList and JsonSerializerOptions objects.

If you have any questions about the above topic or have to get services and consultations and get the best JSON services. Feel free to contact us. AIRO GLOBAL SOFTWARE will be your digital solution. E-mail id: [email protected]

Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/