Easier UI development using bootstrap

By | November 14, 2013

For die-hard programmers one of the more difficult things to do is create an attractive interface for a website. After all most of us aren’t graphical designers, and some (like me) will never be ;). This is where bootstrap helps us along a little. It provides the basic layout and styling techniques to create a UI, and does so relatively easily.

What is easier, designing and scripting an entire top navigation bar yourself. Perhaps even with the help of jQuery to aid in the scripting side a little. But isn’t it a lot easier to create a navigation bar by simple HTML, like below:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">MySite</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>

That’s it the rest is done by bootstrap, it will take care of the JavaScript to create the navigation bar and the CSS to style it a bit. Bootsrap offers a lot more than just a navigation bar, there are a lot of components available for your UI.

Next to components to incorporate in the user interface bootstrap also offers you a ton of glyphs (icons) to apply on any part of your page. From simple arrows to globes. Have a look at the glyphs available, all of them are stored in a separate font that is bootstrap supplies.

Thought bootstrap isn’t an fix it all solution it will definitely aid in getting a UI setup quickly that looks pretty darn good.

Leave a Reply