Using Bootstrap to Create Dynamic, Responsive Columns

Bootstrap is an amazing framework for creating professional looking websites, quickly. I love it for many reasons, but my favorite has to be using it in conjunction with a repeat or loop method to create a responsive, dynamic section of a website. I’m going to use a sample app I created with Rails, called Produce App. For theses examples, I’ll be using the Juices section of the app, more specifically, the show page for individual juices with ingredients. Since each juice has different ingredients, we’ll be iterating through them and setting each with a Bootstrap column.

Sidebar

Similar to all modern frameworks, Bootstrap is built upon conventions. Back in the old days – the wild, wild west days of web development – every developer was  sort of on their own and repetition was the name of the game. But once you’ve built something a few times, you’ll probably notice that you’re writing a lot of the same code. Repetition can slow things down quite considerably. In the mid-aughts some awesome people started to build frameworks that would take much of the arduous and repetitive work out of development so you wouldn’t have to reinvent the wheel every time you began a project. This is a main reason why the web has grown at the exponential rate that it has over the last ten years – developers can spend more time developing and less time repeating themselves.

Bootstrap Columns

Back to the task at hand. Bootstrap breaks everything into containers, rows and columns. Every container can be broken down into 12 columns. If you were to build inside of one of those columns, you have access to another 12 columns, and so on. To use the aforementioned Produce App as an example, each ingredient has its own image of a produce item, its name and quantity to make the juice. To make this look presentable we’d like each row to have three ingredients and if there are more than three ingredients, then a new row would start and seeding would resume. So if we had a Carrot Apple Juice where the ingredients were – you guessed it – carrots and apples, then they would be in the same row.

screen-shot-2017-02-28-at-10-06-21-am

Carrot Apple Juice (not center aligned)

However, if there were more than three ingredients they would get pushed down into a new row. This is the beauty of Bootstrap. What makes it even more beautiful is that it is completely responsive, meaning when the screen size gets smaller, the columns will fluidly break into new rows at certain breakpoints. This allows a row to have three columns when the page is viewed on a desktop and turns into one column when the page is viewed on a phone or tablet. Responsive.

 

screen-shot-2017-02-28-at-10-11-34-am

The ‘each’ loop that iterates over the juice ingredients.

Here we have an array of juice ingredients, namely @juice_produce. The second line is where we set Bootstrap in motion and set each column to a width of 4, since we want three columns. Every iteration of the each statement will produce a new column. When there are more than three ingredients, a new row will start. Pretty cool!

screen-shot-2017-02-28-at-10-07-42-am

Sweet Detox (not center aligned)

These look ok just with standard Bootstrap columns. However, I really wanted these to look better.  The rows look great if there are three or six ingredients in each one. But when there are less, the columns are not centered and look out of place. Luckily, we can add a class to each column giving some extra instructions so we can make it look more polished. We’re going to add a css class called ‘col-centered’ (you can call it whatever you want). In our scss file we declare the class and get styling.

screen-shot-2017-02-28-at-10-28-24-am
The first line will keep our columns in the same row. The second line is where the magic happens. When we say ‘float: none;’, we’re telling Bootstrap not to set the columns up in their normal positions. Normally, the first column would be all the way to the left of the container, second column in the middle, and third on the right. With float set to none, if we have one column it will be centered and not floated to the left. Adding a second column will center both columns. While a third would set all the columns in their regular positions. The rest of the lines beneath are concerned with the image and text positions.

screen-shot-2017-02-27-at-8-14-28-pm

Carrot Apple with center alignment

screen-shot-2017-02-28-at-10-37-35-am

Sweet Detox with sweet alignment:)

See how the second row is now centered? Looks much better in my opinion! Have you used Bootstrap in a similar fashion? Let me know in the comments. Thanks for reading!