Bootstrapping Rango =================== In this chapter, we will be styling Rango using the *Twitter Bootstrap 2.3.2* toolkit. We won't go into the details about how Bootstrap works, and we will be assuming you have some familiarity with CSS. If you don't, check out the CSS chapter so that you understand the basics and then check out some Bootstrap tutorials. However, you should be able to go through this section and piece things together. To get started take a look at the `Bootstrap 2.3.2 website `_ - it provides you with sample code and examples of the different components and how to style them by added in the appropriate style tags, etc. On the Bootstrap website they provide a number of `example layouts `_ which we can base our design on. To style Rango we have identified that the `fluid style `_ more or less meets our needs in terms of the layout of Rango, i.e. it has a menu bar at the top, a side bar (which we will use to show categories) and a main content pane. Setting up The Base Template ---------------------------- Before we can set up the base template to use this style we need to download Bootstrap, *JQuery* and the *Fluid Template.* Download Bootstrap .................. Go to the `Bootstrap 2.3.2 website `_ and download the toolkit. When you unzip the files you will see that in the directory you have a ``imgs``, ``js`` and ``css`` directory plus associated files. Copy the three subdirectories in Rango's ``static`` folder so that you will be able to reference them via the URL ``/static/imgs``, ``/static/js/`` and ``/static/css/``. Download JQuery ............... Now go to the `JQuery website `_ and download the latest 2.x version of JQuery. Put the ``js`` file in to the ``static/js/`` directory. Including CSS/JS in The Base Template ..................................... If you download or look at the source for http://getbootstrap.com/2.3.2/examples/fluid.html, you'll notice that in the ```` section there is some additional ``