change row class

[joe34597425kw29]

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?

[BenPleysier]

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.

[osgood_]

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]

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.

---

[osgood_]

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:

#myIdName .row {

background-color: red;

} 

I was using it as an example, it could have been margin, padding etc in a definition that Bootstrap doesnt offer. I was trying to determine IF the whole layout is using Bootstrap or has Bootstrap been introduced later on which is then causing havoc with css styles already set as custom values.

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.

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.

[BenPleysier]

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.

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.

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.

[osgood_]

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.

[BenPleysier]

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.

[osgood_]

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.

By @BenPleysier

Geez............ I know you're an octo and I should be more receptive at times but its hard given some of your responses - but give me some credit.

[Nancy OShea]

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

<div class="container"

   <div class="row">

      <div class="col">

      Your content goes here....

      </div>

   </div>

</div>

Divs tags can have mutlple classes.

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

[joe34597425kw29]

Thanks All

all the info got me going.