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.
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?
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 ?
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).