CODEWITHSUNDEEP
colorsbackgroundbootstrap-4sections
Compoot
Compoot

Reputation: 2375

change section background colour in bootstrap website

In a bootstrap website like www.teachyourselfpython.com, the welcome and the resources section (if you scroll down) are WHITE. That is, the background colour is white.

I have tried various things and it is not obvious to me where to put the code or what to put, to change that white background for each section (but not affecting the rest) to a light grey.

For example the 'Our resources' section on the page is BLACK, but I cannot see the code that turns it black. 

<!-- About Section -->
    <section id="about">
        <div class="container">

            <div class="row">
                <p></br></br></br></p>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Our Resources</h2>
                    <h3 class="section-subheading text-muted">A Better way to learn Python.<h3>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
                    <p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
                    <p></br></br></br></p>
                    <a href="signup.php" class="btn-block" style="text-align:center;">Sign Up Today!</a>
                </div>
                <div class="col-md-6" style="text-align:center;">
                    <div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
                </div>
            </div>
            <div class = "row">
                <p></br></p>
            </div>
        </div>
    </section>

Can anyone suggest the best method to make a very simple tweak (simply to the main index page) to turn the white parts of the background light GREY

Source code: www.teachyourselfpython.com can be used for demo (in terms of where to insert what)

I have tried adding this under each section

<!-- About Section -->
    <section id="about">
        <div class="container"  style="background-color: #ce0818;opacity:0.8;">

but this turns the block 'red' (or whatever colour) and not the entire WIDTH of the website, this being the problem.

Upvotes: 1

Views: 9852

Answers (1)

Pravin Poudel
Pravin Poudel

Reputation: 1536

In context of our resources - you should put that background css to the section div not in container div

<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">

and to change the background to light grey write it in tag like

<body style="background:#cccccc !important;">

This is inline method which is not preferred much . You can use external css and write your css there and include that file in page

To use an external style sheet, add a link to it in the section of the HTML page: example:

<link rel="stylesheet" href="styles.css">

and write 

body{
background:#cccccc;
}

#about{
   background: #24242a;
   padding: 60px 0;
  text-align: center;
  }

or can include that css code in that page inside head tag example:

    <head>

     <style>
          //write your style code here
     </style>

   </head>

teachyourself have that css written in css/main.css file

Upvotes: 2

Related Questions