-1

I have been building dynamic HTML to handle desktop/mobile width dimensions with the bootstrap grid system.

Is there a way to combine css classes in a "parent" class to limit duplicate code?

Example, Change:

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>

To:

<div class="all-column"></div>

Where the .all-column class combines all class widths into one class?

BigBen_Davy
  • 17
  • 1
  • 10

2 Answers2

2

You can do it like this:

<div class="col-xs-6"></div>

This will take care of other classes automatically col-lg-6 col-md-6 col-sm-6

Arvind Muthuraman
  • 2,957
  • 1
  • 12
  • 11
  • Thank you for your answer. Can you expand on how the ".col-xs-6" class handles all other width sizes? It was my understanding it was only for displays that had a width less than 768px. – BigBen_Davy Apr 26 '18 at 15:17
1

No, you can't inherit from another class in CSS, but you can in CSS pre-processors like SASS.

However, using the same col for each breakpoint is unneccessary:

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>

Because, this is the same thing:

<div class="col-xs-6"></div>

Read how the Bootstrap grid classes work.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Really? Interesting. Could you clarify how the ".col-xs-6" class handles all other width sizes? It was my understanding that that class only handles widths less than 768px. – BigBen_Davy Apr 26 '18 at 15:16
  • Please read the [answer I linked to](https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-bootstrap/19865627#19865627) or refer to the Bootstrap docs. – Carol Skelly Apr 26 '18 at 15:17
  • @BigBen_Davy — RTFM: [Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes](https://getbootstrap.com/docs/3.3/css/#grid) – Quentin Apr 26 '18 at 15:17
  • Thanks for the awesome links. Will definitely work on RTFM! :) – BigBen_Davy Apr 26 '18 at 15:25