Web responsive design - Bootstrap

Our the past few years, Twitter Bootstrap became a popular web development framework. If you're not using a responsive framework for your website yet, it's time you to take a look into Bootstrap.

So what are the benefits of Bootstrap?
  1. Speed of development/Saves time
  2. Responsiveness
  3. CSS and JS Components
  4. Cross browser support
  5. Well documentation with examples
  6. Open source and third party plugins
  7. Big Community support
  8. Easy Customization
  • Speed of development:

    Bootstrap CSS and JavaScript libraries offer ready-made pieces of code that helps to beautify your web site. Rather than coding from scratch, A web developer can use styling and design aspects that are already taken care by Bootstrap.
    Bootstrap saves many hours of web coding by simply adding 4 lines of html code (2 CSS files and 2 JS files) as below and utilizing their CSS and JS components across your web application or site.

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  • Responsiveness:

    Bootstrap scales your website from phone to tablets to desktops with single code base. It supports every device using Grid system and CSS media queries. The Grid system scales up to 12 columns. It starts out stacked on mobile (small) and becoming horizontal on desktop (medium or large) devices. Bootstrap Navbar component begin collapsed in mobile and become horizontal on desktop devices.

    Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
    Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
    Container width None (auto) 750px 970px 1170px
    Column width Auto ~62px ~81px ~97px
    Mobile First Strategy

    Bootstrap 3 providers mobile friendly from the start. It is as simple as adding the viewport meta tag to your <head> element.

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  • CSS and JS Components:

    Out of the box, CSS and JavaScript components enables your website with rich web behavior. Example Carousel component provides slideshow easily with captions.

    • Typography: Headings, Inline text, Blockquotes, Addresses, Lists
    • HTML: Labels, Forms with Validation, Buttons with options, state and sizes, Responsive Tables, Help text, Responsive images
    • Glyphicons
    • Menu dropdowns, Navbar, Pagination, Thumbnails, Progress bars, List groups
    • Modal with animation, Tabs, Tooltip, Alert, Carousel

  • Cross browser support:

    Bootstrap is built to support latest desktop and mobile browsers. On Windows it support IE 8-11 versions. Very Old browsers might display differently styled. Example IE 8 browser doesn't support covered edges for buttons. (CSS border-radius property).

    Chrome Firefox Internet Explorer Opera Safari
    Android Supported Supported N/A Not Supported N/A
    iOS Supported N/A Not Supported Supported
    Mac OS X Supported Supported Supported Supported
    Windows Supported Supported Supported Supported Not Supported
  • Open source, Community & Docs:

    Bootstrap is open source. It's hosted, developed, and maintained on GitHub repository.
    Bootstrap has very good Community support on stackoverflow for Q&A from professional and enthusiast programmers.
    Very well documentation with examples on Bootstrap site.

  • Customization:

    You can start with vanilla default theme. For custom look and feel, Bootstrap's allows customization of components, colors, sizes and many more items online and download the compiled libraries with just a button click.

  • Conclusion:

    Well design, responsive development, mobile-first strategy, pretty good documentation and good community support are strengths of Twitter Bootstrap. If you haven't used this framework, it’s probably time to give it a try.
    If you need any help to build responsive web application, feel free to Contact us. For any feedback, feel free to leave us a comment below.