So I have this WebSocket Chat and I get these white boxes left and right to it if I apply a background-color to it. How do I get rid of them? I have had this problem with a few of my pages…
I tried adding a background-color to the html, body and also container tag but they still stay white. Maybe it has something to do with bootstrap?
Here is the code:
Chat.ejs:
<div class="container">
<h1 class="text-center mb-4">WebSocket Chat</h1>
<div class="input-group mb-3">
<input id="name" type="text" class="form-control" placeholder="Enter your name" value=""/>
<button class="btn btn-primary" type="button" onclick="saveName()"> Set Name </button>
</div>
<div class="input-group mb-3">
<input id="text" type="text" class="form-control" placeholder="Enter your message">
<button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
</div>
<div id="messages"></div>
<div class="row btn-container">
<div class="col-md-12">
<a class="btn btn-secondary" href="/">Go back to the start page</a>
</div>
</div>
</div>
CSS:
html, body{
background-color: #222531;
}
.container {
background-color: #222531;
width: 100%;
margin-top: 50px;
color: white;
}
.form-control {
background-color: #2e3440;
color: white;
border-color: #4c566a;
}
.btn-primary {
background-color: #81a1c1;
border-color: #81a1c1;
}
.btn-primary:hover {
background-color: #5e81ac;
border-color: #5e81ac;
}
/* Chat styles */
.message {
background-color: white;
color: #222531;
padding-left: 10px;
/*border-radius: 5px;*/
}
.message:last-of-type {
margin-bottom: 0;
}
a {
width: 100%;
position:relative;
margin-top: 30%;
}
Here is a link to see it live in action: JSFiddle Snippet
2
Answers
The background-color doesn’t change because you’re including the
bootstra.css
styles that overwrite yours. So there are three options:!important
(NOT recommended!)div.myClass
is more specific than.myClass
). However, this is not that applicable here.Edit
Also note, that you can see that yourself when using the
Debugger
tools of your browser. The following image shows an example where you can see, that your styles are overwritten by something.You are using
.container
which is adding amax-width:960px
and your background colour is white, creating the two white strips either side.You have two options:
.container
to.container-fluid
, which will make it the full width of the page.