Skip to main content

Posts

Showing posts from April, 2016

Bootstrap pagination

Pagination describes the number of web pages on a website. A website with 5 web page looks as shown below. 1 2 3 4 5 <nav> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> </ul> </nav> Any web page link can be highlighted using the active class. 1 2 3 4 5 <nav> <ul class="pagination"> <li class="page-item"...

Bootstrap labels or tags

Labels are used for categorization of articles or posts in a website. Bootstrap allows for creating the labels. By default it will occupy the size of its next parent element. For example, if you embed label in a heading tag, it will re-size the fonts of label to match with the heading as shown below. Example heading New Colored labels Appearance of labels can be changed by coloring them with the modifier classes. Default Primary Success Info Warning Danger <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> Rounded labels or pilled labels Labels can be rounded with .label-pill modifier class. Rounded ...

Introduction to bootstrap

Bootstrap is the simplest framework used to create both mobile and desktop friendly responsive websites without any prior programming language experience. History of bootstrap Mark Otto and Jacob Thornton, developers from Twitter, developed an internal tool while working in twitter company. It was named as Twitter Blueprint. Months later, many developer from twitter started to contribute to this internal tool. Later it was renamed as Bootstrap and was released as an open source project in GitHub on 19th August 2011. Compatibility with browsers and devices Bootstrap is compatible with all the latest versions of web browsers namely Google Chrome, Microsoft Internet explorer, Microsoft Edge, Firefox, Safari, Android Browser and WebView. How to get the bootstrap? Bootstrap can be included from the Content Delivery Network(CDN) into the webpage  or  it can be downloaded from the official website Bootstrap usage guidelines Webpage should have HTML5 doctype...