Responsive Web Design

Topic : How to create responsive web design ?

Before proceeding to the solution lets begin with the anther modern name of responsive design Fluid Layouts .

There are some of the defined screen size by bootstrap. these are as follows:

1. Extra small devices Phones (<768px small="">
2. Small devices Tablets (≥768px)
3. Medium devices Desktops (≥992px)
4. Large devices Desktops (≥1200px)

but you can modify the screen size as you required with your client output screen .

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

example:

/* Small devices (tablets, 768px and up) */
@media screen and (max-width: 768px) {
    .navbar-default .navbar-nav>li>a{
        text-align: center;
        width:100%;
    }
}


Ref:  http://getbootstrap.com/css/#grid-media-queries