× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Making Grid Layouts in Bootstrap

Christoph Wagner
Apr 08, 2015
<p> </p> <p><a href="http://getbootstrap.com/">Bootstrap</a> is a popular and powerful CSS framework. It is frequently used to achieve great looking websites without having to hire a CSS wizard. Unfortunately, in the most recent version, it has become rather complex and not very accessible to beginners. In this tip I'll try to ease the learning curve a bit.</p> <p>The first and most important thing you should learn is the <a href="http://getbootstrap.com/css/#grid">grid system</a>. This allows you to create beautiful layouts that fluently adapt to different screen sizes. In order to use it, you'll need a container first (which can go in your layout template if you are using Ruby on Rails). </p> <pre><code class="language-html">&lt;div class="container"&gt; ... your code here ... &lt;/div&gt;</code></pre> <p>Now, the way the grid system works is kind of like a table: you divide your content in rows and columns. Each row is made up of 12 columns, all using the width, which adapts dynamically to the size of the screen (or browser window). Now, you can combine those columns any way you want – 4 and 8, 3-6-3, 3-4-5, whathever you want. Any combination will work, as long as it sums up to at most 12 (after that, your cells will automatically wrap into the next line).</p> <pre><code class="language-html">&lt;div class="row"&gt; &lt;div class="col-md-4"&gt;4 columns wide&lt;/div&gt; &lt;div class="col-md-8"&gt;8 columns wide&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-md-3"&gt;3 columns wide&lt;/div&gt; &lt;div class="col-md-6"&gt;6 columns wide&lt;/div&gt; &lt;div class="col-md-6"&gt;6 columns wide&lt;/div&gt; &lt;div class="col-md-3"&gt;3 columns wide&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-md-2"&gt;3 columns wide&lt;/div&gt; &lt;div class="col-md-2"&gt;4 columns wide&lt;/div&gt; &lt;div class="col-md-2"&gt;5 columns wide&lt;/div&gt; &lt;/div&gt;</code></pre> <p>The result will be a grid in which all the cells are sized proportionally. Somewhat like a table, but without using a <code>&lt;table&gt;</code> tag. Because using tables for layouts is so 2002.</p> <p>Now, whatever content you put in those cells will fill up as many columns of the grid as you specify, up to 12 in total. And the best part is that it's responsive – meaning if you resize your browser window (or open the page on a different device, like a tablet or a smartphone), it will still look neat.</p> <p>Now, you might be wondering what's up with the <code>-md-</code> part. Good. That means you're paying attention. This is probably the part that's most confusing when you get started with this. The <span style="color:rgb(95, 99, 102)"><code>-md-</code> refers to the<var> smallest device that will still display the entire row </var>exactly as you set it up.</span> There's a <a href="http://getbootstrap.com/css/#grid-options">handy reference chart</a> in the Bootstrap docs, but let me just explain it real quick:</p> <ul> <li><code>xs</code> refers to extra small devices (smartphones, with a screen with of less than 768 pixels)</li> <li><code>sm</code> refers to small devices (tables, with a screen with of 768 pixels or more, but less than 992 pixels)</li> <li><code>md</code> refers to medium devices (desktops with with a width below 1200 pixels)</li> <li><code>lg</code> refers to large devices (desktops with a width of 1200 pixels or more)</li> </ul> <p>That means if I set up twelve columns with <code>col-xs-1</code>, I'll get 12 horizontal columns every time, even on a smartphone (they'll just be rather small). If I set up 12 columns with <code>col-sm-1</code> instead, I'll get 12 horizontal columns on any device that's a tablet or larger, but on a smart phone, they'll be displayed vertically instead (in other words, they'll become rows).</p> <p>The remaining sizes work accordingly – basically, whatever device class you specify will show all the columns as defined, and any device that is smaller will have the columns break down vertically instead. Try working through the <a href="http://getbootstrap.com/css/#grid-example-basic">examples</a> with that knowledge in mind, and it should become clear pretty quickly.</p> <p>Good luck styling your app! If you need more help, don't hesitate to schedule a session.</p>
comments powered by Disqus