CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Lord Commander
Lord Commander

Reputation: 31

Apply background color to the whole html page

enter image description hereI have an HTML page where I have a div called container, I'm trying to use bootstrap here. Inside the container, I have a div called row. When I try to apply a background color to the div the color is applied only to the div content and spans only the width and not the height. I'm trying to apply the background to the hello world site and I want it to cover the whole page.

Here is the code.

.container {
  padding: 10px;
}
.row {
  background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/homePage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row"> Hello World! </div>
    </div>
  </body>
</html>

Upvotes: 2

Views: 18757

Answers (6)

Simen Fjellstad
Simen Fjellstad

Reputation: 402

Try this:

1st: The html element has a default margin that you have to deal with every time you write a page.

2nd:You may not want use jsfiddle to test code when using bootstrap css (or any other library for that sake). As the JSFiddle code is run before the bootstrap code.

3rd: Try this:

body,html{
  margin:0;
  width:100%;
}
html{
    background-color: gray;
}

.container {
    padding: 1em;
    max-width:750px;
    min-height:100vh;
    width:90%;
    margin: auto;
    box-sizing:border-box;
    background-color:aquamarine;
}

.row {
    margin:0;
    padding-left:20px;
}
<html>
  <body>
    <div class="container">
      <div class="row"> Hello World! </div>
      <div class="row"> Hello , I am World! </div>
    </div>
  </body>
</html>

Upvotes: 2

MucaP
MucaP

Reputation: 1062

Seems nice to me:

html {
  background-color: darkgray
}
.row {
  background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/homePage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">Hello World! Here goes some content</div>
    </div>
  </body>
</html>

Upvotes: 1

Kavish Mehta
Kavish Mehta

Reputation: 53

May this one you need:

html,body {
  padding: 0;
  margin: 0;
  background-color: red;
}

.row {
    background-color: darkgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container">
        <div class="row"> Hello World! </div>
    </div>
</body>

Upvotes: 1

MarioZ
MarioZ

Reputation: 997

You can make the container to cover from top to bottom and set the gaps that you need left and right:

.container {
            position: absolute;
            top: 0px;
            left: 10px; /* Gap left */
            right: 10px; /* Gap right */
            bottom: 0px;
            background-color: black;
        }

Upvotes: 1

Nilkamal Gotarne
Nilkamal Gotarne

Reputation: 395

Maybe this is what you need.

.container {
  margin-left:-20px;
  padding-left:30px;
   margin-right:-20px;
   background-color: darkgray;
  }

.row {
    background-color: darkgray;
}

body{
    background-color: red;
 }
 <div class="container">
        <div class="row"> Hello World! </div>
    </div>

Upvotes: 1

Alex
Alex

Reputation: 1099

Just apply it to the body.

 body{
    background-color: red;
 }

Upvotes: 1

Related Questions