Twitter bootstrap place right Column on top on mobile view

Problem statement

Consider a scenario where you have DOM like following..

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A [TEXT]
        </div>
        <div class="col-md-6">
            B [IMAGE]
        </div>
    </div>
</div>

Looks like this on desktop
------------------------
|A [TEXT] | B [IMAGE] |
------------------------
and Looks like this on mobile view
-----------------------
| A [TEXT] |
| B [IMAGE] |
----------------------

But on many occasions you need to display bottom column i.e "B[IMAGE]" at the top of "A[TEXT]" section on mobile devices.

Solution:

If you are using twitter bootstrap, you can make it without writing any extra javascript or CSS. So here comes the solution. Twitter bootstrap provide 2 classes

1. 1. pull-left (float:left )
2. 2. pull-right (float:right )

Step 1:
Add first column as image container (B [IMAGE]) and add class pull-right to it. (it will show image on right side of the page on desktop.)

Step 2:
Add second column as text container ( A [TEXT] ) and add class pull-left to it. (it will show texts on left side of the page on desktop.)

Your DOM structure should look like below.

<div class="container">
    <div class="row">
        <div class="col-md-6 pull-right">
              B [IMAGE] 
        </div>
        <div class="col-md-6 pull-left">
              A [TEXT]
        </div>
    </div>
</div>

Preview

See the Pen Twitter bootstrap place right column image on top of text on mobile devices by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML5 → Twitter Bootstrap

Twitter bootstrap place right Column on top on mobile view

By yash → Friday, April 29, 2016

CSS - hide input type number on chrome and mozilla firefox browsers

HTML5 introduces new input type called "number". We can use this to take number input from user. It's a nice addition to the webpages and make things simpler, but design point of view it is not going to make things simpler.
 Chrome and Mozilla Firefox browsers by default adds up and down arrows. UI can look ugly due to this if arrow is not required.

HTML:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;    
    appearance: none;
    margin: 0;  
}
input[type='number'], 
input[type='number']:hover,
input[type='number']:focus {
  -moz-appearance: textfield;
}

CSS:

<input type="number" name="number-demo" >

See the Pen Cross platform hide input type number arrows by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML5

CSS - hide input type number on chrome and mozilla firefox browsers

By yash → Wednesday, April 13, 2016

CSS - While printing website page hide all anchor href link

While printing  page of any website many browsers print all the href links, which is sometimes not necessary or look ugly.
To avoid printing href link you just need to add following code into your css file.

CSS 

 @media print { 
   a[href]:after {
    content: none !important;
  }
 }

Tags: CSS

CSS - While printing website page hide all anchor href link

By yash → Thursday, April 7, 2016