Skip to main content
J
joe34597425kw29
New Participant
January 28, 2024
Question

change row class

  • 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.

      4 replies

      J
      joe34597425kw29Author
      New Participant
      January 30, 2024

      Thanks All

      all the info got me going.

      Nancy OShea
      Nancy OShea
      Community Expert
      January 29, 2024

      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.

       

      Nancy O'Shea— Product User, Community Expert & Moderator
        O
        osgood_
        Brainiac
        January 28, 2024

        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
          BenPleysier
          Community Expert
          January 28, 2024

          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
            BenPleysier
            Community Expert
            January 28, 2024
            quote

            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:

             

            quote

             

            #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.


            quote

             

            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.

             

            quote

            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.

             

            quote

            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.

             

            Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
              BenPleysier
              BenPleysier
              Community Expert
              January 28, 2024

              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!
                Terms & ConditionsAccessibility statement
                Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices