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
Related
I have an image I'm trying to code divs based on with Bootstrap and HTML+CSS
The image looks like this:
I'm looking to have 3 of these side by side via bootstrap with
What I am currently struggling with is the split inside of each with the top part and bottom parts such as in the example photo.
Is there an easy way to do this? Ideally I'd like the top section of the div to be a different background color, with the image on the left and the text next to it on the right, with the bottom part of the div a separate color.
Any tips are greatly appreciated!
For layout, you can use something like this:
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
and insert you card instead of "column" word.
Bootstrap Grid system
<div class="row">
<div class="col-4">use BS card or create using div</div>
<div class="col-4">use BS card or create using div</div>
<div class="col-4">use BS card or create using div</div>
</div>
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>
So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
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
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.