Working with the Bootstrap grid system

Bootstrap is a frontend library built to assist developers in building responsive and organized layouts with ease.

My project Turbo Tickets required me to create many pages with responsive layouts. In technical terms, I'd want vertically arranged divs on a mobile screen and horizontally arranged divs on a wider screen. Usually I'd use media queries and alter the proprties of flex direction but it was much simpler an implementation with Bootstrap grid systems.

At its core, Bootstrap's grid is a mesh of a row and columns where a row can be divided into 12 units and the child columns can be given certain widths of these 12 units. This provided me with the flexibility to create complex layouts throughout my app.

One of the key advantages of working with the Bootstrap grid was its simplicity and ease of use. I could leverage predefined classes to specify the layout of my content, instead of styling it in CSS from the ground up. By utilizing classes such as "col-md-6" to create a half-width column on medium-sized-and-up screens, or "col-12" for a full-width by default, I could effortlessly craft responsive designs without delving into extensive CSS code.

With Bootstrap, I found it easy to shift from a multi-column layout on larger screens to a single column on smaller devices. This adaptability is crucial in today's mobile-centric landscape. So for me, the Bootstrap grid system was an invaluable tool.