About a month ago I started Free Code Camp’s full stack development program. Since then, I’ve been learning front end development through lots of hands-on projects. The first project I worked on taught me how to use Bootstrap to create a tribute page.
Before this, I dealt with the struggle of alignment and centering using only CSS. When I started learning about layouts in Bootstrap, I was very excited. It seemed that if I learned to correctly use container classes, I wouldn’t have to spend so much time trying to align and center everything manually.
While this was mostly correct, I did come across some layout issues. My biggest problem happened when I tried to put an image and a column of text next to each other. I thought both columns would naturally be the same size and align perfectly no matter the screen size. Turns out that all the responsiveness that makes Bootstrap so great also makes it hard to align two columns for all screen sizes.
<div class="jumbotron"> <div class="row"> <div class="col-md-6">image</div> <div class="col-md-6"> <div class="row"> <div class="col-md-12">text column</div> </div> </div> </div> </div>
My initial code caused the page to break from two columns into one when the screen size was medium or smaller. This setup left a lot of room for the text column to shrink smaller than the picture for larger screen sizes. I needed to make the columns break before the text had a chance to fall out of alignment. I decided to switch the columns to break on xl instead of md. This caused the two columns to break a lot sooner than before and prevented the alignment issue. Problem solved!
The one thing I didn’t pay enough attention to was the mobile view. While the page works for mobile and splits correctly, the text size is definitely too small. I’ve started to think about this on recent projects as a mobile view has become more important.
Check out my GitHub repo here!