[Resolved] Cannot assign class custom class to bootstrap div

[Author]

Posts

[michaelC-33]

I want a full background of my row to be grey. I am using the GeneratePress theme. I have set the content area to full width in the theme and then in Layouts, I selected the row option called "Row background extends to full width".

The following output is created:

<div class="full-bg">
<div class="container">
<div class="row">

When I add my "bg-grey" class to the row in the Toolset Layouts editor, the bg-grey class is placed in the same div as the "full-bg" class above. This results in left and right sides of the container being given a grey background.

How do I add my "bg-grey" class to the div that has the "row" class (the third div that was created)? I cannot find where to do it in the Toolset Layouts editor. I know this is the right place to put it from inspecting the code and adding it in there. It works perfectly.

[Waqar]

Hi Michael,

Thank you for contacting us and I'll be happy to assist.

Your observation is correct and through the Layout's row settings, it is possible to assign a custom class to the outer container ( i.e. div with the "full-bg" class ), but not the inner div with "row" class.

If you'd like to add a background style to that inner "row" div, you can adjust your CSS code so that instead of targeting the same div with class "bg-grey", it targets the inner immediate div with class "row".

For example, if your current CSS code is

.bg-grey {
background: grey;
}

It can be updated to:

.bg-grey > .container > .row {
background: grey;
}

I hope this helps and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[michaelC-33]

My issue is resolved now. Thank you!