January 25, 2016
Push and Pull Columns in Bootstrap 3 With Example
Push and Pull classes play an important role in properly ordering columns. In case, you are not happy with normal order of columns, then you can use Push and Pull classes to change that and reorder them as you wish. Push class moves column to the right and Pull class moves column to the left.
In the below given example, we have 1st column with span of 9 and 2nd column with span of 3. We are moving 2nd column to the left using Pull class and moving 1st column to the right using Push class. Push class will have gap of 3 columns from left and Pull class will have gap of 9 columns from the right.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial </title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-9 col-xs-push-3" style="background-color: red; color: white"><h1>Hello</h1></div> <div class="col-xs-3 col-xs-pull-9" style="background-color: green; color:white"><h1>World!</h1></div> </div> </div> </body> </html>
