locked
Is it possible to change the sidebar color in bootstrap RRS feed

  • Question

  • User887623398 posted

    Hello,

    Is it possible to change the sidebar color in bootstrap?

    my code:

    <div class="sidebar col-md-4 col-lg-3   mt-1 ml-1 justify-content-center bg-success" style="width:25%; height:600px; z-index:1; overflow-x:hidden;  ">
    
                <div class="mt-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
                <div class="mt-2 mb-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
    
    
            </div>

    Thanks

    Tuesday, September 29, 2020 7:26 PM

All replies

  • User-1330468790 posted

    Hi SaeedP,

     

    I try your codes but still unable to understand which area color you want to change.

    If you want to change the color for the area with class "sidebar", you could directly set the color in CSS style. 

    Could you please specify the problem with more detailed description?

     

    Scroll Bar Color?

    However, I notice that there is a scroll bar with default style. Do you mean that you want to change the color of that?

    If so, it is possible to modify the scroll bar styling using non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others.  though these properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-"). You could refer to this article to explore more Web Style Sheets CSS tips & trick: UN-COLORED SCROLLBARS

     

    There is a collection of Scroll Bar CSS Support topic from stack overflow: https://stackoverflow.com/a/14150577/12871232

    One working approach for Chrome is that:

     <style>
            ::-webkit-scrollbar {
                width: 12px;
            }
    
            ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
                border-radius: 10px;
            }
    
            ::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background-color: #fff; /* Change the color here */
                -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
            }
        </style>

    Demo:

     

    Best regards,

    Sean

    Wednesday, September 30, 2020 3:13 AM
  • User887623398 posted

    Dear Sean,

    Thanks for paying attention to my post.

    See, the color of the sidebar area has a dark blue color. Without I color it in bootstrap or CSS. How is it possible?!

    Here comes the code:

    <div class="container">
        <div class="row ">
            <header class="col-12 bg-primary" style="width: 100%; height:100px; ">
            </header>
    
    
            <div class="main col-12 mt-1  " style="margin-left:0px; height:600px;width:75%; background-color:aliceblue;">
    
    
            </div>
    
            <div class="sidebar col-md-4 col-lg-3   mt-1 ml-1 justify-content-center " style="width:25%; height:600px; z-index:1; overflow-x:hidden; background-color:aquamarine;  ">
    
                <div class="mt-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
                <div class="mt-2 mb-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
    
    
            </div>
    
            <footer class="col-12 bg-info" style="width:100%;height:100px;">
            </footer>
    
        </div>
    
           
    
    
    
        
    
    
    </div>
    
    
    
        
    

    Thursday, October 1, 2020 3:34 PM
  • User-1330468790 posted

    Hi SaeedP,

     

    If you are talking about "unexpected" background color, the reason is simple since you add background color class in div elements.

    You could refer to : https://getbootstrap.com/docs/4.0/utilities/colors/#background-color

     

    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

    Above ".bg" classes will be rendered as below:

     

    Hope helps.

    Best regards,

    Sean

    Tuesday, October 6, 2020 8:29 AM
  • User887623398 posted

    Dear Sean,

    But I didn't add any color in div element!!

    <div class="sidebar col-md-4 col-lg-3   mt-1 ml-1 justify-content-center " style="width:25%; height:600px; z-index:1; overflow-x:hidden; background-color:aquamarine;  ">
    
                <div class="mt-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
                <div class="mt-2 mb-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
    
    
            </div>

    Can you find it?!! really confused!!

    regards,

    Saturday, October 10, 2020 10:13 PM
  • User-1330468790 posted

    Hi SaeedP,

     

    As I have told you that .bg class represent bg color for element. The dark blue comes from the header, not the side bar.

    <div class="row ">
            <header class="col-12 bg-primary" style="width: 100%; height:100px; ">
            </header>
    
    
            <div class="main col-12 mt-1  " style="margin-left:0px; height:600px;width:75%; background-color:aliceblue;">
    
    
            </div>
    
            <div class="sidebar col-md-4 col-lg-3   mt-1 ml-1 justify-content-center " style="width:25%; height:600px; z-index:1; overflow-x:hidden; background-color:aquamarine;  ">
    
                <div class="mt-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
                <div class="mt-2 mb-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
    
    
            </div>
    
            <footer class="col-12 bg-info" style="width:100%;height:100px;">
            </footer>
    
        </div>

      

    Best regards,

    Sean

    Tuesday, October 20, 2020 7:56 AM