Twitter Bootstrap Grid Stacking Issue - html

Evening all,
I'm having a little trouble with the grid system and am looking fir a bit of guidance here.
Take the following code for example:
<div class="container">
<div class="row"> <!-- PROBLEM -->
<div class="col-md-12">
<div class="problemclass">
</div>
</div>
</div> <!-- /PROBLEM -->
</div> <!-- /container -->
</header>
<main>
<div class="container">
<!-- WORKS -->
<div class="row">
<div class="col-md-4">
<div class="notproblem">
{CONTENT}
</div>
etc...
As you can see, I've marked a row as PROBLEM in the header and it contains a 12 column span. The CSS for problem class is set at about 300px height and a background image (It is set at 300px because the background image is 300 px in height). the code looks like this:
.problemclass{
height: 300px;
background: url('background.png');
}
Everything stacks and lays out perfectly... until I size the browser down to test the stacking. At this point, the row marked PROBLEM will begin to completely overlap the row marked WORKS; the content will overlap the background image, and the actual div goes under the background image! I have no freaking clue why LOL! My guess is that maybe I cannot have just a background with a set height and expect it to work?
Any advice would be appreciated, and I hope I was clear enough.
Also note that there are 2, 6 column grids above the 12 column grid in the same row that I did not include in attempt to keep the code a little more clean and clear.

Related

HTML (bootstrap) container and rows

I just want to be sure about some basic HTML structuring.
Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.
All nice and easy there.
My question is, am I "correct" or not to place columns and rows within separate containers?
This is what I mean:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
</div><!-- end body -->
I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.
I just want to be sure, thanks!
As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.
This approach also depends heavily on the design.
Full page width div, YES, the separate container is correct.
Note : For full width
Use container-fluid for full width, and remove the padding as well.
container-fluid class has padding-left : 15px and padding-right: 15px.
You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.

Why is the container overlapping my sidebar-ish <nav>?

Why is the fluid-container overlapping like that, but others don't?
Is that correct, or am I missing something? Looks wrong to me.
<nav class="nav flex-column float-left">
{links}
</nav>
<div class="container-fluid"><!-- overlapping -->
<div class="row"><!-- fine -->
<div class="col"><!-- fine -->
<main role="main"><!-- fine -->
{content}
</main>
</div>
</div>
</div>
https://jsfiddle.net/w3LwwxL7/
Edit: Just for you to know: I want to achieve a static left sidebar/nav with a fixed width (see image). Everything on the right is main content. That's why I didn't used col-1 (nav) and col-11 (main). Hope this helps :-)
Give your sidenav a fixed width and set a padding-left (same amount of sidebar width)
Here is an example:
https://jsfiddle.net/w3LwwxL7/3/

Bootstrap make full width full height column

I have the following layout:
<body>
<nav class="navbar navbar-inverse">
...
</nav>
<div class="jumbotron">
...
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">...</div>
</div>
<div class="row">
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
</div>
</div>
</body>
Navbar and header take up 100% of the screen width. However, the columns don't - huge empty margins remain near the left and right edges of the screen.
If I remove the container div everything takes up 100% of the space and it works fine by me, but I'm not sure if it's a good practice since in alll examples container is used. Also, I want to make the columns take up all the space to the end of the page and not sure if container is necessary to accomplish it.
Per the Bootstrap documentation, a container is required. You can use container-fluid instead of container if you want full-width containers. You can find this in the Bootstrap 3 documentation here:
http://getbootstrap.com/docs/3.3/css/#grid
You can find info about this in the Bootstrap 4 documentation here:
https://getbootstrap.com/docs/4.0/layout/overview/

How to make an image stay exactly at the screen left side in Bootstrap, without ruining the text in the same row and its responsiveness?

I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after

Using 2 background on the same row in bootstrap

Bootstrap 3
I want to create "squares/rectangles" with different background colors. Here is an example of what I want :
The black vertical lines represent the container that I use. When I apply a background-color to the inner elements, it doesn't "extends" outside the container.
Here is the code :
<!-- Header -->
<section class="purple-area">
<div class="container">
<h1> PURPLE </h1>
</div>
</section>
<!-- Main Content -->
<section class="space-top">
<div class="container">
<div class="row">
<div class="col-md-6"> DARK GREY </div>
<div class="col-md-6"> LIGHT GREY </div>
</div>
</div>
</section>
Extend the container to the full width and play with the padding of your inner divs.
You can also 'cheat' by defining divs outside of the black container giving them the appropriate background.
This simple example will explain how to make 2 background in a single container jsfiddle. Hope it helps
--EDIT : updated fiddle
--fiddle with responsive capabilities