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.

image

 

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

Setting background image of webpage using CSS

I am a developer and designing mainly CSS takes hell out of me. So even to do a small things like setting background image of web page takes lot of effort of me. I am working on an application and using Twitter Bootstrap for the designing purpose. I had a requirement to set background image using bootstrap. In this post I am sharing how can you do that? I know for many of you it may be super easy or may have better way to do. I am sharing this tips for developers like me who does not have any idea how CSS and bootstrap works.


body {
     margin: 0;
     background: url('bg5.jpg');
     background-size: 1440px 800px;
     background-repeat:no-repeat;
     display: compact;
}

I have put image in the root folder of application. I hope this quick tip may help you. After setting this application looks like,

clip_image002

Thanks for reading.

CSS Basics Part 1: Work with Selectors

Many of my readers asked me to write a series on CSS learning. So here is my attempt to help them. In this series I will focus on basics of CSS and how one can start learning CSS.

In this post we will learn,

  • Adding Style to document
  • CSS Selectors
  • CSS Compound Selectors
  • CSS Style Priority : Selector Specifity

Adding Style to document

You can add styles in three different ways,

image

Inline as attribute of element style can be added as below. Here we are adding colour to h1 element.

clip_image002

Problem with above approach is

  • Maintenance of style would be complex when size of document will grow.
  • You cannot reuse style

Second approach to include style is to put them as part of head section of document. You can create style in head section of HTML document as below,


<head>
 <title>Demo App</title>
 <style>
 h1
 {
 color:red;
 }
 </style>
</head>

Problem with above approach is

  • Maintenance would be complex as size of document will grow.
  • You cannot reuse style across various HTML files

Third and best approach to add styles in HTML document is using external CSS files. In this approach you put styles in a separate file with extension CSS. You add reference of external CSS file as below

image

In above approach you can reuse styles across various HTML files or documents.

CSS Selectors

You can select elements from HTML document to apply CSS on that in three ways.

image

Element Selector

If you want to apply same style to all appearance of a particular element on document then you apply style using Element Selector. In Element Selector you choose an element with its tag name and apply style on that. For example we want to apply colour red to all h1 elements appear on document.


h1
{
 color : red;
}

As you see above we are selecting element directly with the tag name. Above CSS will make colour of all h1 as red.

Class Selector

You can select an element on name of class associated with it and apply style on that. You select element on basis of class using dot (.) Usually you use class selector when you want to apply a particular style to different set of elements. For example you want to apply color blue style to various elements on document. In that case you will give a class name to all elements and then select them on basis of that class name. To understand it better let us consider below document


<h1 id="titlemessage">Education is must</h1>
 <p class="bluetext">Education in its general sense is a form of learning in
 which the knowledge, skills, and habits of a group of
 people are transferred from one generation to the next
 through teaching, training, or research. Education frequently
 takes place under the guidance of others, but may also be autodidactic
 </p>
 <h3 class="bluetext">Pledge to teach</h3>

As you notice that we have given same class name bluetext to p and h3 element on HTML document. Next in CSS we will select these element using dot (.)


.bluetext
{
 color:blue;
}

Above using class selector we selected class bluetext and applied style in that. So all elements with class name set as bluetext would have blue color.

Bottom line is you select an element on its class using dot (.) in CSS.

Id Selector

You can select an element on its id and apply style on that. You select element on basis of its id using hash(#) on CSS. So let us consider again above HTML we used in class selector. H1 element has id. If you want to apply color red using id you can do that as follows


#titlemessage
{
 color : gray
}

Compound Selector

You can select an element from document using more than one selector approach. Let us consider scenario that “You need apply a particular style to all h1 with id set as temp”. In this case you will use first element selector to select all h1 then id selector to filter particular h1. This approach of selecting element is known as Compound Selector.


h1#titlemessage
{
 color : red
}

Above compound selector will apply color red style to h1 element with id titlemessage on the document.

CSS Style Priority

Let us say you have applied CSS on a particular element at all three levels like

  • Inline in element
  • In head section of document
  • In external CSS file

Then which CSS will get applied to element. In above said scenario style applied at inline on element will get applied.

image

So always style applied as inline has highest priority. However there is way you can override this. By marking a style as important


#titlemessage
{
 color : red !important
}

 

As you see above we have marked color style as important so it will take highest priority while applying styles on elements.

Position based Priority

Now there could be one more scenario that you have style set more than once on the same document. In that scenario position based priority come to action.


#titlemessage
{
 color : red
}

#titlemessage
{
 color : blue
}

In above scenario style color blue will be applied because style which is defined as last in document has more priority.

Now come to the end of first post of CSS basic series. I hope you find this post useful to get started with CSS. Thanks for reading.