CSS indent text — July 13, 2018

CSS indent text

Use this CSS property

text-indent: 50px;
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.

Bootstrap make all columns of same height in a row — August 17, 2017
Bootstrap 3 place block in center — June 26, 2017