Chapter 6 HTML Layout with Bootstrap
The Infographiq approach uses Bootstrap for HTML page layout. Bootstrap is a widely-used Javascript library for controlling layout. In this section of the guide, we give a brief overview to how Bootstrap works, within the Infographiq context. For a much more extensive Bootstrap tutorial, click here.
To get started, if you haven’t do so already, download the example folder and unzip it. In the example folder, you’ll find a file called “infographic.html”, which you can also see here. Open infographic.html in your handy-dandy code editor. Lines 24-34 in the <body> section of the HTML read as follows:
<!-- define bootstrap layout that will contain the infographic -->
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div id = "svg1"></div>
</div>
<div class="col-md-3">
<ul id="toc1"></ul>
</div>
</div>
</div>This section of the HTML uses Bootstrap to define the layout within which the Infographiq infographic will be placed. Let’s go through it line by line.
First, let’s define the container that will hold the Infographiq content. For this, we use the Bootstrap class “container-fluid”, which indicates that the container should take up the full width of the viewport (which is usually just the width of the browser window).
Second, we’ll use the Bootstrap class “row” to define the container that will hold the Infographiq content. Bootstrap uses a grid system of columns and rows to control layout. Here, we are indicating that the Infographiq content will all be in a single row.
Third, let’s define the container that will hold the Infographiq image with the Bootstrap class “col-md-9”. There are three components to this class.
The “col” component at the beginning indicates that this class has something to do with Bootstrap columns.
The “9” component specifies that this container is to be 9 columns wide. Bootstrap allows a maximum width of 12 columns, so therefore 9/12 of the width of the row (or 75%) is allocated for the Infographiq image.
The “md” component stands for “medium”. It refers to the width of the screen on which the page is being viewed. If the screen is equal to or greater than 992 pixels wide, then everything in the row will be viewed in a single horizontal row. If the screen is smaller than that, then the stuff in the row will be stacked on top of each other. The reason for doing this is that, on small screens, legibility will be better if the elements of the page are stacked vertically instead of horizontally.
Fourth, let’s create the container where the InfographiqJS Javascript will position the image. In the InfographiqJS function link_svg() further down on the HTML page ‘infographic.html’, we’ll provide ‘svg1’ as the value for the parameter svg_id. In another section of this guide, we go into much more detail into link_svg().
Fifth, we define the container that will hold the Infographiq table of contents with the Bootstrap class “col-md-3”. This class works very similarly to “col-md-9” defined earlier, except that this container will be three columns wide. As there are a total of 12 columns to work with, this container will take up 25% of the width of the row.
Sixth, we create an unordered list where the InfographiqJS Javascript will position the table of contents. In the InfographiqJS function link_svg() further down on the HTML page ‘infographic.html’, we’ll provide ‘toc1’ as the value for the parameter toc_id. In another section of this guide, we go into much more detail into link_svg().