PSD to bootstrap | Front End Web Development Guide

Bootstrap is a pre built CSS framework that can be used to create any kind of website. it has the basic style definition of all the HTML components that can be used in a website such as lists, navigation tab, page header, etc. Bootstrap is based on LESS, that is known to be an extension of CSS. It is easier to understand and much more faster than other extensions. In order to understand the bootstrap, one should have a complete knowledge of CSS and HTML. To further make the process easier, here are some tips on how to efficiently use bootstrap –

Enable Hover Dropdowns

While designing a high level design project, it’s better to go custom. Bootstrap doesn’t have a hover dropdown navigation by default, but one can tweak it without doing much customization.

@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */
.dropdown:hover .dropdown-menu {
display: block;
}
}

Container Fluid For Full Width Rows

Usually, while using bootstrap, to generate full-width row, people just omit the container. This can be problematic, as Bootstrap’s row class has a -15px left and right margin. One should use container fluid fo full width rows.

Media Query Breakpoints

One should use the following default media queries

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

/*========== Non-Mobile First Method ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

Responsive Grid Columns

Bootstrap let’s the grid of the website stack differently, depending upon the size of the device. By using the following, one can make the grid looks even more nicer,

Switch Column Collapse Order

To switch the column collapse order, one can apply

<!–
Desktop:
[1 2 3] [1 2 3 4 5 6 7 8 9]

Mobile:
[1 2 3]
[1 2 3 4 5 6 7 8 9]
–>
<div class=”row”>
<div class=”col-md-9 col-md-push-3″>1 2 3 4 5 6 7 8 9 </div>
<div class=”col-md-3 col-md-pull-9″>1 2 3 </div>
</div>

<!–
Desktop:
[ 2nd col ] [ 1st col ]

Mobile:
[ 2nd col ]
[ 1st col ]
–>
<div class=”row”>
<div class=”col-md-6 col-md-push-6″>1st col</div>
<div class=”col-md-6 col-md-pull-6″>2nd col</div>
</div>

Lead Class

To make a paragraph tag slightly larger than the normal font, one may implement the following

<p class=”lead”>This is a lead paragraph. Lead paragraphs can really tie content of a page together! It attracts your eye!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.</p>

Responsive Image

To make an image responsive, one can simply set the width of the image to a percentage and height to an automatic, so that the website will be compatible with the various browsers.

Using bootstrap while designing a website, makes it more attractive and reduce the process of development by making it responsive for various screen sizes too. Moreover, it is customizable, that allow the owner to give a personal touch to the website.