Understanding the Grid Layout in Bootstrap

With each passing day, new devices with new screen sizes are popping up – and as web developers, we need to create web applications that are responsive to these various screen sizes. There are multiple ways you can create a responsive layout, however I find Bootstrap grid layout to be the easiest. In this post, we will cover various aspects of the Bootstrap Grid system with various examples. To start with let us create a four equal column layout for medium-sized devices in Bootstrap Grid system.



4 equal columns layout

To create the layout, you need to complete the following steps:

  1. Create a div with class container for fixed width or container-fluid for the full width of the screen
  2. Create a div with class row. Div with the class row must be inside container
  3. Create 4 divs for 4 columns. Div of the column must be the immediate child of the row div
  4. Content will be inside the column div

To create four equal columns in a row, I have created four divs with the class set at col-md-3 as shown in the listing below:

Read full article on the Infragistics blog

What is a Provider () in AngularJS?

The provider() function allows us to create a configurable service where we can set input per application for the service created using the provider (). For example, if we need to set API key to access a service on the application level, we can set that in the module config and pass input to the provider using the $provide service. All the others ways to create services internally use the $provide service.

Creating a service using $provide service in module.config

Let us start by creating a very simple service using the provider() function.

app.config(function ($provide) {
    $provide.provider('globalsetting', function () {
        this.$get = function () {
            var appname = "Lawyer App";
            return {
                appName: appname

Let’s explore what is going on in the above snippet. To create a service using provider, we need to use the $provide service. The provider function of the $provide service takes two parameters: the name of the service and the function. A provider function must have a $get function. To create a simple service using the provider(), we need to perform following five steps:

  1. Inject the $provide service in the app config method
  2. Create a provider using the provider() function
  3. Pass two parameters to the provider() function: the name of the service and a function
  4. The provider function must contain a $get function
  5. Return an object literal from the $get function

We can use the globalsetting service created using the provider by injecting it in a controller as shown in the listing below:

Read full article on the Infragistics blog