Bootstrap (and CSS) Useful Tips
I’ve been on some project in which I was coding as a Frontend Engineer. The project I got there maybe simple but the lesson I learned was so surprisingly much more than I thought before. The project deadline was so tight and the client (the ones who own the project) wouldn’t hesitate to give me some new orders to make it through the deadline. The change requests given to me nearly met the deadline spoken before, and I, as the one who was working on it, had to work fast (code faster) in order to meet their requirements (and its change requests).
I tell you something. I’ve never been code (or write?) HTML and CSS in a professional level before. But there was a time that I tried to do it before but only as a hobbyist. Well of course, for me that haven’t been code HTML and CSS before, had to deal with tight deadline in my new field of work (Frontend Engineer), I would be panicking as maybe the most of people did. Then I tried as best as I can to solve them and complete it. Fortunately, the task I had to complete is just a simple task, to create a web page simply using HTML and CSS only (no Backend things here because in the first place the purpose of this project was to implement the simple web design into a real static web pages).
The project I was working on was using Bootstrap for their CSS library. And here are some tips I got when doing such task.
1. Class ‘col’ (or ‘col-*’) is the only allowed child or children for class ‘row’
I got this when I was inspecting my row elements’ children. I realized that my elements will have border outside of which the col class defined (or supposed to have). This is because any row element will have negative margins, which is why the only allowed elements to be its child (or children) was the col class. The col class itself will have some padding in their side (right and left) to encounter the row element’s negative margins. Those padding’s purpose was to control the spacing between each column (called gutter by Bootstrap itself). This is documented as of the Bootstrap’s official website here.
2. You can combine class ‘row’ with class ‘justify-content-*’ to easily position elements inside it
Yes, you read it well. You can easily position all of the row element’s children by using class justify-content-*. The full list of its class is documented here in Bootstrap website. Maybe this tips is useful when you’re going to position all your columns in the center of the screen, or maybe you want to make them look like they’re spreading across the screen’s row. You can pick those class to which you want to apply them into. And voila, you get them right in the position you always wanted them to be.
For example, below I will combine the usage of class row with the usage of class justify-content-around to make the col classes inside them spread across the row itself.
<div class=”row justify-content-around”>…</>
3. You can sometimes center the contents inside the class ‘col’ using class ‘text-center’
In tips before, you can make your row element’s children in the center of the screen. But how about if I was going to place some text or image in a column (col class)? Doesn’t the class I mentioned before is only useful when applied into class row? You can do actually to make your column’s content center, by combining the col class with the text-center. This combination is a bit tricky that the images (or other elements) inside them (the columns) must have inline-block display to make this tips works. Sometimes I found this tips working, and sometimes I don’t. It’s just a matter of time and a little tweaks that this tips is actually works somehow. It may looks like this.
<div class=”col-md-4 text-center”>…</div>
4. Multiple class ‘col-*’ in the same element will exactly work as you tell them to be
“Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.” — Bootstrap
Bootstrap library for CSS as they mentioned themselves, is a mobile-first responsive library to make your projects easier and faster to develop. This means that they have prepared some styling to make your web page beautiful and responsive in mobile-view. Yes, mobile-view, the times you access or see your web pages in tablet or mobile screen. They provide a mechanism to make your web page beautiful yet still responsive when accessing via mobile screens. You can make your web pages like that by applying different class col to fit the screen size.
For example to my explanation, imagine you’re building a web page that shows multiple stakeholder quick profile. You must display 3 to 4 profile in a single row when accessed from laptops screen, but you feel like it is not big enough to show them on the tablet screens. Supposed you want to make only 2 profiles in a single row when accessed by tablets and only a single profile in a row when accessed from mobile screens. You can make this happen by applying combined column class which fits well to your needs. Maybe you can achieve them by applying column classes below, just for example.
<div class=”col col-md-6 col-lg-4 col-xl-3”> … </div>
The details of classes I used above is documented by Bootstrap themselves in here. You can read them on if you’re willingly to learn more about its grid system.
5. Make sure you test your page in different size resolution to make sure of it
Bootstrap exists to make the developer’s life easier, especially when it’s come to build we pages. Bootstrap is defining some screen resolution groups, and they are xs, sm, md, lg, and xl screens. The xs screen is the default when it comes to choose what kind of col class is match for you. The next bigger of class col is sm up until the largest is xl screens. The xs class comes with max-width of 575px, the sm class comes with min-width 576px and max-width 767px, the md class has min-width 768px and max-width 991px, the lg class has range 992px until 1199px, and the biggest is xl class with having only min-width of 1200px.
When you’re building your own web pages, make sure you test them with the all resolution I just mentioned above. This, to make sure that your web pages is truly like what you expect from your code. You can use tips I just mentioned above about combining different col class to meet your needs.
6. CSS rules will ‘cascade’ or ‘overwrite’ the other same rule applied before (thus the name CSS, Cascading Style Sheet)
CSS (Cascading Style Sheet) is working like its name cascade, so you must properly order the rules. The latter you define the rules, it will be applied if the rules defined is the same. The latter the rule (or rules), it will overwrite the existing ones. Because of this, it is important to notes the order of your CSS rules you used.
Take notes that, this tips has some exceptions when you get into something that called CSS selector. It’s more advanced topic than this writings would like to tell, but it’s worth to read about.
7. Use media queries in your CSS in appropriate way
This tips is the next step from the point above. This is related in the way that how you define the media queries in your CSS.
As far as I know, the smaller screen size that you want to apply the style into, the latter you must be define in your CSS file. Take an example. Imagine you want to make a box with width of 720px size in the laptop screen, but you want to have them having width of 50% of your screen size when you see in tablet screen, and having width of 100% when you see in mobile screen. You could solve this problem simply by applying rules like below (just for example).
@media(min-width: 992px){ .my-box { width: 720px; } }
@media(max-width: 991px){ .my-box { width: 50% } }
@media(max-width: 575px){ .my-box { width: 100% } }
In doing that, the browser will check your screen size and match the media queries you defined like above example code. This is why, personally for me, I prefer to keep my CSS rules and the media queries in orders to make them behave like what I expected from them.
Final thoughts
And maybe that’s all about some tips I can give to you right now. I got that 7 points of tips I mentioned above by doing my first professional-class as a Frontend Engineer in some kind of project. I hope you guys can apply some or all of them into your skill development. And I hope that my tips above will boost your work or will give you some insight about Bootstrap and/or CSS. Thanks for your time to read this story.
