Fit image to div without stretching — June 11, 2019
Css align div center with top 50% and left 50% — April 25, 2019

Css align div center with top 50% and left 50%

Sometimes we want to place element at center of page but element has some width than it is difficult to put it in center. one option is to adjust the value of left and set it to a value less than 50%. but is will create issues in different resolutions. Css provides solution to this problem

position: absolute;top: 50%; left: 50%;transform:translate(-50%, -50%);

transform:translate(-50%, -50%) will do the magic.

CSS indent text — July 13, 2018
bootstrap-select library not working with bootstrap 4 — May 20, 2018

bootstrap-select library not working with bootstrap 4

We need to use the latest css and js files for bootstrap-select. So use version 1.13.0

The old versions of bootstrap-select does not work with bootstrap 4. also do these steps

1. add class="selectpicker" and data-live-search="true"to your select
2. add data-tokens to your options. The live search will look into these data-token element when performing the search.

For more details check this answer on stackoverflow.

Html add icons to select option — December 19, 2017

Html add icons to select option

The option tag removes all the other tags included. Lets say we want to add a font-awesome icon to select option like this

<option>Price Low to High<i class="fa fa-long-arrow-down" aria-hidden="true"></i></option>

but we cant. So solution to this issue is UNICODE CHARACTER. So we can do it like this.

<option>Price Low to High </option>

if we want to use font awesome icon then assign font family to SELECT like this

<select  style="font-family: 'FontAwesome';">
<option value="price-up">Price Low to High </option>

Read this for better explanation.

Css align text Vertically Center — October 31, 2017

Css align text Vertically Center

To align text vertically centered we need to add some table properties to div. First we need a outer div which must have a fixed height. Then a middle div and in that middle div we can add any text. We just need these properties.

.outer { display: table;position: static;height: 222px; }
.middle {display: table-cell;vertical-align: middle;width: 100%;position: static;}

For better explanation please follow this link. There is one more example with css FLEX property.

CSS add overlay with content and spinner — September 29, 2017

CSS add overlay with content and spinner

            background-color: rgba(255, 255, 255, 0.8);
            position: fixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            background-position: center center;
            background-repeat: no-repeat;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-size: 91px;

Just add anything in div with class ‘overlay’, like text , image and it will appear in center of page.