使用 SASS 返回 Bootstrap 列宽

Question

I am trying to get a title in a column to overlap the next column without using position:absolute and preferably keeping the width of the title as wide as col-8 column to keep in proportions for smaller screens. Is there a way to achieve this using Bootstrap variables or mixins with SASS?

Here is an example of the desired outcome

Thanks in advance!

Answer 1

This is, in general, not possible since the main idea of a grid is to contain content inside columns.

Now you can achieve a similar effect (moving out the columns) when you combine CSS transform scale with lower font-size . You can take it further and add the col-8 media queries as well.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale