So i created a footer with a green background and added a green backgroun inside a container as you can see on the image. But somehow the length of the green is longer than the other container.
CODE HERE
HTML
CSS
I will suggest put your green class inside container not with container. Check below snippet, you will see the difference.
.green {
background: green;
}
.container {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="green">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-4">4</div>
<div class="col-xs-5">5</div>
</div>
</div>
</div>
I hope this will help.
Looking at your html code it seems that you are using twitter bootstrap framework.
if you want to use the column structure then you should follow the markup standard set by bootstrap
HTML STRUCTURE
<div class="container">
<div class="row">
<div class="col-md-3">
HTML code
</div>
</div>
<div>
don't forget to set the hierarchy as per standards.
checkout the documentation for more details https://getbootstrap.com/docs/4.0/layout/grid/
Related
I have a canvas inside a div with threeJS, and would like to display the purple bar (which will be for user settings) on the right side of the threejs window. The problem is that for some reason bootstrap is not recognising that I want to put these 2 columns together in a row and is placing them on separate rows. I would expect what I have currently to work, and can't see anything wrong with it... I have a similar situation somewhere else in the project, but with only divs, which is working fine. There is no lay-out scss code other than one thats resetting the margin and padding. there are also no other html files in use for this component.
const threeCanvas = document.getElementById('threejs-canvas') as HTMLCanvasElement;
this.renderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<canvas id="threejs-canvas">
<app-threejs [width]=400 [height]=350></app-threejs>
</canvas>
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
EDIT: Desired result would be something like this:
https://www.elfskot.nl/wp-content/uploads/2018/08/thumbnail-configurator-780x520.png
SOLVED: I had ng-bootstrap installed without bootstrap...
Your HTML and class usages is fine, please check if your Bootstrap CSS files are loading and applying to your page.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<img src="https://placehold.it/400x350">
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
</body>
</html>
First off I would like to say that I know I am not the most efficient or clean in my HTML.
My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css
Linking:
<head>
<title>Help Menu</title>
<!--
==============================================================================================================
REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)
==============================================================================================================
-->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/bootstrap/css/custom.css" rel="stylesheet" >
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/npm.js"></script>
<script src="/jquery/jquery.js"></script>
<!--
==============================================================================================================
BOOTSTRAP REFERENCES DISTRO 3.3.7
==============================================================================================================
-->
</head>
For example I am able to change the background color of the panel using the <style> element:
<div class="container">
<div style="background-color: #4286f4;" class="panel panel-default">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
But I cant change the color of the panel using external CSS (the following CSS snippet is in custom.css):
.lukedbgcolor {
background-color: #4286f4;
}
<div class="container">
<div class="panel panel-default lukedbgcolor">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the lukedbgcolor class first like this:
<div class="lukedbgcolor panel panel-default">
ALL help / advice / criticism is welcomed,
Thanks!
The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />
Cache fix courtesy of #mayersdesign
This is due to the way that CSS works, it will give certain priorities to styles depending on where they are located. The reason defining in the HTML (also called an inline style) works is because it's given higher priority.
Using multiple stylesheets can cause problems and there are various solutions. You can use the keyword !important to give a certain style highest priority. It's generally discouraged because it makes it harder for others using your code to see why a style is being changed but if it's just yourself then go ahead:
.lukedbgcolor {
background-color: #4286f4 !important;
}
.panel.lukedbgcolor {
background-color: #4286f4;
}
Generally in CSS, the more specific selector is taken into account.
Let's say you have the following div:
<div id='myId' class='someClass'></div>
with the following CSS:
.someClass{
background-color:red;
}
#myId{
background-color:blue;
}
the div's background-color will be blue because it's more specific.
It's possible that the style of bootstrap provides a more specific selector than yours, and therefore overrides it.
Try adding an id to your div and see if it makes a difference. (since id's are unique they're as specific as can be)
I cannot (yet) comment on the original post. How are you loading this page? Are you seeing any errors in the browser console? The advice above to use the browser devtools and examine the element, see if the class is there, and if it is being applied or overridden by other defined styles would be the way to approach it.
You also want to have jquery.js loaded before the bootstrap.js, because bootstrap.js depends on jquery.js being loaded first. The browser console would also tell you this - it's a very useful tool!
<body>
<div class="container">
<div class="row">
<div class="col-xs-12" style="background-color:red;">
dfsasfssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
</body>
PLUNK to edit
This is probably something very obvious, but I thought bootstrap columns expanded vertically with content. Mine do not.
Bonus question: Was it always default behavior for bootstrap to indent "container" - how do I avoid this?
That's bootstrap normal behavior, because col-*-* is set float:left, so you need to use word-wrap:break-word, because you don't have spaces in your text.
To avoid the indent you mentioned (the default padding that bootstrap add to .container), you can reset by set .container {padding:0}
.col-xs-12 {
background:red; /* demo */
word-wrap: break-word
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
dfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
I want to wrap a group of rows in bootstrap while still having everything in one container. Are there any rules/conventions about this regarding bootstrap?
I put a fiddle below of what i want to do, but i am not sure if this is the right method.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="extraDiv" id="topdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
<div class="row">
<div class="col-md-6">Bla</div>
<div class="col-md-6">Bla</div>
</div>
</div>
<div class="extraDiv" id="bottomdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
</div>
</div>
As far my understanding it is totally okay the way you use .row class in a .container class. For further understanding you can check this link Must Bootstrap container elements include row elements?
Seems fine - though it depends what you want to do with the gutters etc.
Generally you just want one .container wrapping the whole page (to give you the main central column), and within that you can nest as many rows/cols as you need to.
Lots of answers of how nesting a container inside of a container-fluid is a bad idea. So without doing that, how do I make the background-color of my non-fluid rows take up the width of the entire screen?
You can see Bootstrap does this on thier own website with the purple but viewing the source was not helpful for me. Any ideas?
You can wrap your container in a another div and apply the background color to this parent div. Please see http://codepen.io/panchroma/pen/aNgvoJ
HTML
<div class="wrap">
<div class="container">
<div class="row">bootstrap row</div>
</div>
</div>
CSS
.wrap{
background-color:teal
}
Update
This is good but for alternating row background colours, one must use
wrap -> container -> row for each row?
If you need alternating rows each with full width background colours, it would be cleaner to use a container-fluid for your page, then use a nested container on each row: http://codepen.io/panchroma/pen/GZbqLV
<div class="container-fluid">
<div class="row one">
<div class="container">
<div class="row">one</div>
</div> <!-- end nested container -->
</div> <!-- end row -->
... <!-- repeat above for each row -->
</div> <!-- end parent container -->
CSS
.one{
background-color:pink:
}
something like this maybe
<style>
.cont {
background-color: yellow;
height: 20em;
width: 100%;
}
</style>
</head>
<body>
<div class="cont">
<!-- content -->
</div>