New Participant

Question

change row class

Forum|Forum|2 years ago
January 28, 2024
4 replies
1241 views

I have many rows in my layout, The problem I am having is that the class="row" in html / bootstrap makes all my other rows the same as that row. Can I change the name of the class="row" to class="row-a"? I have tried this and it will stack my row's. so I am stuck or am I using the wrong bootstrap component?

This topic has been closed for replies.

J

joe34597425kw29Author

New Participant

Thanks All

all the info got me going.

Nancy OShea

Community Expert

The Bootstrap structure uses container, row and col classes like this:

<div class="container"

Your content goes here....

</div>

Divs tags can have mutlple classes.

To provide better answers, show us your code and tell us what you're trying to do.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Brainiac

Are you saying you created a custom class yourself named 'row' then added the Bootstrap default css to your page afterwards, which also has a class name of 'row'?

In that case if the custom class 'row' is in a parent container then you can target those 'rows' within that container by giving the container an id

#myIdName .row {

background-color: red;

}

If your page has been built using Bootstrap css only then there is probably a Bootstrap utility class that you can use to style the rows how you require them to be. You mention when you changed 'row' to 'row_a' your elements become stacked, adding display: flex; to your 'row_a' css styles will force those elements to render side by side.

Without actually seeing the code and css you are using it becomes a guessing game.

BenPleysier

Community Expert

Because the OP is using Bootstrap, changing the colour to red can be done by adding a class called bg-danger as in

<div class="row -bg-danger">

But even if this was not a Bootstrap project, the following is a bad workflow:

@osgood_ wrote:

#myIdName .row {

background-color: red;

}

This is the normal way to code it:

.bg-red {
   background-color: red;
}

This way the OP could use it anywhere he wanted.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

I was using it as an example, it could have been margin, padding etc in a definition that Bootstrap doesnt offer.

By @osgood_

See https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding. It even has vertical and horizontal gutters. Please give advice that you know about.

By @BenPleysier

By definition I meant a 'value' that was not covered in Bootstrap as default. Bootstrap only offers a limited amount of options for spacing and margin. Whilst these may be enough in most cases it doesnt cover ALL options and it may be that you need to create your own to satisfy your own requirement rather than that of a framework. In which case I am providing advice I know about as opposed to being a bit short-sighted, given you actually use Bootstrap.

In your eyes my example might be a bad workflow because you like to clutter your html with excessive amounts of class names and use workflows which are more applicable to multi billion dollar companies, you've been hood winked, only now are the next generation of developers starting to question this foolish approach.

By @osgood_

Again, please do not give false information. You do not know me, let alone what I like. Please supply proof of where the next generation of developers are starting to question this approach.

By @BenPleysier

I don't know what false information you think I'm giving? Do you ever read the comments on developers youtube videos, read any developer blogs? There is clear discontent about todays workflows in a number of them.

Your example makes no sense because if I should want to change the background colour to green you would have to update your entire class names, both in the css and html and color value to reflect the color change whereas l would only have to update the color value.

By @osgood_

Would I? What is wrong with with assigning another colour to the selector bg-red? Maybe the selector name was ill chosen. Maybe it should have been bg-mychoice. At least it can be used multiple times unlike an ID.

By @BenPleysier

Yes, that is what a very poor developer would do, use a specific css class name which has nothing to do with the css definition it contains.....red/green.........humm, saying my workflow was bad and putting forward an even worse one well I'll leave it there.

My example was a specific use case where one might want to target specific classes in a specific container as a result of a possible css conflict........a great solution, I think.

All Im trying to do is work out why the OPs rows are not what is expected - after all, a row in Bootstrap 4/5 is only a flex container so there should not be an issue if the OP is just using Bootstrap only. The issue may ocur if the framework has been introduced later or a custom class has been deployed which has the same name as a Bootstrap class. Maybe well find out.

Removing a class of row and replacing it with row-a will upset the Bootstrap grid system. I thought that you would have understood this.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

You can assign any class to the row that you wish in form of <div class="row row-a">. Just a space between the class names.

But it depends entirely what you want to do with the row. If you want to change a colour or modify the spacing, then you should use one of Bootstrap's classes.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded