If you have been developing a Bootstrap-powered responsive design, chances are you have come across the fact that you need to build a layout that supports a Bootstrap five columns, seven columns, and nine columns design. This comes to a surprise to all front end developers since the whole purpose of responsive design is to be able to provide a fluid layout that utilizes the maximum amount of white space at every display size. Of course, the easiest solution is to distribute the elements among the amount of columns that are available in Bootstrap. This causes some elements to appear excessively large, specially, when dealing with forms.
Input fields and buttons are common elements in a page. Mostly used in contact forms, but very often used in feedback forms, questionnaires, job applications, and more; forms need to be fluent to the design and appealing to the UI/UX design. If we restrain ourselves to use the column classes that Bootstrap offers, we can end up with:
- an incredibly large zip code input field (See Figure 1),
- a field too small to contain all information (See Figure 2),
- or an inconsistent and asymmetrical design that bothers many users (See Figure 3),
Oversized Inputs
By using col-md-3, we are basically trying our best to use the most comfortable size we can find that is not too big or too small for all input fields I will be using in the form. This may be great for the address field, but as you can see, it is an excessive amount of space for a 5 to 9 digit zip code field.
Undersized Inputs
Another solution we can fall back to is to decrease the size of the column classes to our next available option (col-md-2). This seems to be working great, yet, you will be left with a left over space on the sides(s) of the page due to not utilizing the entire width. Not to mention, the address field may be too small if someone lives in a non-numeric street.
Inconsistent Layout
And lastly, possibly the worst solution, is to conform to these size classes and mix and match until you get the total of 12 spans between all the fields in that row. So, you give more room to the address field, and take away from the zip code, and eventually you have satisfied both criteria. If a single row is all you need, you are fine. For a multiple rows form, it will appear unorganized as the columns will not look in alignment
Desired Design
We can’t guarantee the Bootstrap Five Columns design is the perfect one for you. Perhaps, five columns are also too small for your screen size or too large for certain elements, we only mean to give you another size option that you can use. With that in mind, if this is a size that satisfies your design layout, you will end up with the following five column layout.
Bootstrap Five Columns
If you haven’t already, you need to download all necessary files from Bootstrap, but I assume if you are reading this is becasue you have already downloaded it. Before we get our hands dirty, I’d like to point out that whenever you are working with front end development, you never modify the CSS Framework, except….NEVER! Simple enough? Assuming you have a custom stylesheet, you should have a set of modifying classes that you always use in all projects. For instance, You should have a custom class to null the padding to 0, and perhjaps one also for margins, and so on. Add the classes in this tutorial to that custom CSS and you should be able to use them on every Bootstrap website you build in the future.
The HTML
<div class="container">
<div class="col-md-fifth">
<label>Address</label>
<input type="text" class="form-control" placeholder="Column fifth"/>
</div>
<div class="col-md-fifth">
<label>City</label>
<input type="text" class="form-control" placeholder="Column fifth"/>
</div>
<div class="col-md-fifth">
<label>State</label>
<input type="text" class="form-control" placeholder="Column fifth"/>
</div>
<div class="col-md-fifth">
<label>Zip Code</label>
<input type="text" class="form-control" placeholder="Column fifth"/>
</div>
<div class="col-md-fifth">
<label>Country</label>
<input type="text" class="form-control" placeholder="Column fifth"/>
</div>
</div>
As any other method of implementing bootstrap size classes, you will implement col-md-fifth as your class for a Bootstrap Five Columns division. Alternatively, you can also use col-lg-fifth, col-sm-fifth, and col-xs-fifth.
The CSS
.col-xs-fifth,
.col-sm-fifth,
.col-md-fifth,
.col-lg-fifth,
.col-xs-seventh,
.col-sm-seventh,
.col-md-seventh,
.col-lg-seventh,
.col-xs-ninth,
.col-sm-ninth,
.col-md-ninth,
.col-lg-ninth{
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-fifth {
width: 20%;
float: left;
}
.col-xs-seventh {
width: 14.28%;
float: left;
}
.col-xs-ninth {
width: 11.1%;
float: left;
}
@media (min-width: 768px) {
.col-sm-fifth {
width: 20%;
float: left;
}
.col-sm-seventh {
width: 14.28%;
float: left;
}.col-sm-ninth {
width: 11.1%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-fifth {
width: 20%;
float: left;
} .col-md-seventh {
width: 14.28%;
float: left;
} .col-md-ninth {
width: 11.1%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-fifth {
width: 20%;
float: left;
} .col-lg-seventh {
width: 14.28%;
float: left;
} .col-lg-ninth {
width: 11.1%;
float: left;
}
}
As mentioned above, you must do these changes in your custom stylesheet. The CSS we demonstrate shows the size classes inheriting a 20% width for Bootstrap Five Columns, 14.29% width for Bootstrap Seven Columns, and 11.1% for Bootstrap Nine Columns, as well as, all the other properties Bootstrap has assigned to their classes. The media especifications ensures a fluent desing on every display width.
Thank you for reading!