Skip to main content
B
beng2000
Known Participant
December 5, 2020
Question

responsive rectangle in bootstrap 4

  • December 5, 2020
  • 3 replies
  • 424 views

Can anyone give me some pointers on creating a horizonal line/rectangle with a colored background.  I want it right under the navbar so I inserted a fluid container and tried so many different ways after searching and searching that I am going bonkers.

 

I didn't want to ask because I am pretty sure it is simple.  Thank you.

    This topic has been closed for replies.

    3 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 5, 2020

    You may also want to experiment with https://www.w3schools.com/howto/howto_css_style_hr.asp

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      December 5, 2020

      @BenPleysier  makes a good point.  And if you use the <hr> tag in your Bootstrap markup, you can refine the appearance with built-in Bootstrap classes, no custom CSS needed.

       

      <nav>Navigation goes here...</nav>
      <hr class="w-100 h-25 bg-danger">

       

      Bootstrap Utility Classes:

       

      Nancy O'Shea— Product User & Community Expert
        B
        beng2000Author
        Known Participant
        December 7, 2020

        Hi Nancy.  I will also start using the getbootstrap site and the w3schools.com site.

        This is an image of all I wanted to do LOL.

         

         I am not really sure why the Training dropdown is always highlighted.  I will look into it.

        Thanks again.

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 5, 2020

        If a border is not what you want, please show us your code so we can understand what you're working with.

         

        Nancy O'Shea— Product User & Community Expert
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 5, 2020

        The CSS Border property will do what you want.

         

        <!DOCTYPE html>
        <html>
        <head>
        <style>

        nav {
        padding-bottom:15px; /**optional padding**/
        border-bottom: 10px solid red; /**adjust values to suit**/

        }

        </style>

        </head>
        <body>

        <nav>Navigation goes here...</nav>

        </body>
        </html>

         

        Reference:

        https://www.w3schools.com/cssref/pr_border-bottom.asp

         

        Nancy O'Shea— Product User & Community Expert
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices