Drum Machine - Bootstrap grid - Help needed


I was aligning my components in the drum machine project using Bootstrap grid system. I have aligned for desktop screen size but when I’m trying to align for the mobile screen size it is not coming right.

Link: https://codepen.io/rrahul17498/full/pQMjdj

In the App component… I was trying to align the ControlPanel component first. I have set column width for the small screen as 8 along with an offset of 2. But the column is occupying the whole row. Offset of 2 is not coming. Can you tell me why this is happening?

I only see 2 components. Is that it?

No no… I have put other component within comments so that this problem can be dealt first. I ll add them later in the App component.

I’m not sure what needs aligning with what.

In the desktop version…the ControlPanel component is placed in App component in the center by giving column width as 6 and offset as 3. That looks fine. In the mobile version I am giving column width as 8 and offset as 2. But the offset is not applying. The column is occupying the whole row. Not much of an issue. But Id like to know why that was happening. Why is the offset not applying in mobile version ?

That took too long to figure out!!

Look in the docs for how to specify extra small viewport! :eyeglasses:

1 Like

col-8 offset-2

Migrating to v4

Updated grid class names and a new grid tier:

xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).

1 Like

Ahh yes…got it. it works now. Thank you lasjorg and JohnnyBizzel. :slight_smile:

1 Like