Skip to main content
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
    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
    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
    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
    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
    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