Can I give the col-md-1.5 in bootstrap?

Bootstrap grids and custom widths

To understand how to achieve your desired col-md-1.5, you first need to understand how the Bootstrap grid is put together. Its column width is usually represented by fractions of 12, with col-md-1 equating to 8.33333333%. To make the size 1.5 times larger, we'll need to bump this value up to ~12.5%.

Making customisation responsive

Responsive design is at the heart of Bootstrap, and it's important to carry this forward when creating custom overrides. By adjusting the flex properties of your .col-md-custom class, your column will acclimate to various screen sizes in line with Bootstrap's responsive nature.

Aligning your layout

Ensure standard Bootstrap rows are correctly housed within a .container or .container-fluid to keep the alignment intact. Changing column sizes can have a surprisingly large impact on alignment, especially when padding and gutters are factored in.

DIY grid patterns

Extreme cases may require throwing the default grid system to the wind and implementing your own responsive classes. Developing custom Bootstrap extensions gives you more granular control, allowing you to arrange your layout down to the last pixel.

Flex and the art of column layouts

The advent of flexbox in Bootstrap 4 was revolutionary. Now you can adjust the terminal properties of your columns by messing around with combinations of flex, max-width, and padding. If you're not already sold on flexbox, this should convince you!

Custom CSS or nesting?

If custom classes still seem a bridge too far, never fear. One alternate strategy is to use nested rows, creating columns within columns to approximate non-standard widths. It's rowception, Bootstrap style!

Custom column crash course

Here's how to cobble together your own col-md-1.5:

/* Because why be normal when you can be ~12.5%? */
.custom-col-md-1-5 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}


And incorporate it into your HTML:

<div class="row">
    <!-- This one goes to 1.5! -->
    <div class="custom-col-md-1-5">...</div>
    <!-- Other columns here -->
</div>


Et voilà - a column measuring 1.5 units wide!

Tips for avoiding layout catastrophes

Watch out for overflow and misalignment issues when applying custom widths. There's often a fine line between a beautifully designed layout and a hot mess. Thoroughly testing your designs across a range of devices is a sure way to keep everything looking fresh and on point.

Community wisdom and toolkits

Code patterns shared by other developers can be a lifeline when facing layout challenges. Exploring custom Bootstrap extensions and resources can also offer an alternate route to your desired design.