In the body of my page I have split the 12 columns into a body which is 8 columns wide and a sidebar which is 4 columns wide. These two areas are a different colour to the background, so I want them to appear as if they are on top of the background. The problem is that when I set a margin between the two areas in order to make them appear as 2 separate areas it effects the layout of my website as now we have 8 columns, 4 columns and this margin, so the sidebar is pushed below the content. How do you add in a margin like this to separate the two areas without destroying bootstrap's grid layout?
edit: I know I could just nest them and essentially add in a column between the two areas, but I only want a margin of say 15px between the two areas.
Code:
<div class="container">
<div class="row">
<div id="content" class="main-content-inner col-sm-12 col-md-8 bg">
</div>
<div class="sidebar col-sm-12 col-md-4 bg">
</div>
</div>
</div>
.bg {
background-color: #fff;
}
.sidebar {
padding-top: 40px;
border-left: 15px solid transparent;
}
You can change the width of the sidebar and add a margin-left to it :
DEMO
.bg {
background-color: #fff;
min-height:150px;
}
.sidebar {
padding-top: 40px;
width:31%;
margin-left:2.3333%;
}
Related
I created a simple webpage with bootstrap that include two containers :
First container :
A white column taking 7/12 of the first row
A black column taking 5/12 of the second row
Second container (under the first one)
A grey page
The first container takes all the page and if you scroll down to the second container, it also takes all the page height
HTML :
<div class="container-fluid h-100 nopadding">
<div class="row h-100 nopadding">
<div class="col-md-7 left nopadding">
left
</div>
<div class="col-md-5 right nopadding">
right
</div>
</div>
</div>
<div class="container-fluid h-100 padding">
<div class="row h-100">
<div class="col details nopadding">details</div>
</div>
</div>
CSS :
html,
body {
height: 100%;
}
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.left {
background: white;
color: black;
height: 100%;
}
.right {
background: black;
color: white;
height: 100%;
}
.details {
background: grey;
color: white;
height: 100%;
}
Here are screenshots of the page (when the page has place to display the black column, everything works. But when I resize the window, it goes under the grey container [I saw that using z-index]) :
I would like the black column to be right under the white one when I resize and the grey column to be under the black column when I resize.
Thanks!
First, you are overrating the power of h-100, then you mixed h-100 with css incorrectly, basically you set on container and row height with h-100 and then in css you defined .left and .right with height of 100% so... Since your containers cannot be higher then 100% and contents (.left and .right) are 100% your “.right” is hidden out of bounds of your row because .left already took all available space...
For a starter I’ve would recommend to use weather bootstrap classes or css, it’s pretty easy to have all that without defining your own css in bootstrap...
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I am building a website and I use bootstrap.
I have 2 columns in the left one I have some text with a pattern as background and in the right one I want a background-image covering the entire column.
For some reason my background image is not showing. I've tried some things but the image never covers the entire column
here's a codepen demo to demonstrate
Your issue is not related to the background image itself, it related to the height of the right column it's height is just 1px because Boostrap by default give each column min-height:1px; when it doesn't have any contents
So you have to give it some content or height of 426px like the left column
Now you have many options to fix this
Option 1
using jQuery:
function adjusting_height(){
var height = $('.has-content').css('height');
$('.has-image div').css('height',height);
}
$(document).ready(function(){
adjusting_height();
$(window).resize(function(){
adjusting_height();
})
});
HTML
<div class="container-full">
<div class="row">
<div class="has-content text-center col-md-6 nopadding">
<div class="block give-me-a-pattern-please-thanks">
<h2>title</h2>
<hr>
<p>Hello there, I am a paragraph text. It's nice to meet you! Unfortunately I am here only temporarily, but hey don't be sad! I am sure we'll meet again soon. Oh yeah before you move on don't forget the check me out on mobile devices I look awesome
there as well.</p>
</div>
</div>
<div class="has-image text-center col-md-6 nopadding">
<div style="background-image: url(http://s1.picswalls.com/wallpapers/2014/12/09/butterfly-wallpaper_093549561_256.jpeg);"></div>
</div>
CSS
.container-full{
margin: 0 5%;
background-color:rgba(0,0,0,1);
}
.block{
padding: 100px;
color: #666;
}
.block hr{
margin-top: 40px !important;
margin-bottom: 40px !important;
border-top: 3px solid aqua !important;
width: 15% !important;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.give-me-a-pattern-please-thanks{
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/new_year_background.png") !important;
background-size: cover;
}
See the new CODEPEN you should find it like
Note
you have a wrong selector in CSS you had used nopadding it should be .nopadding
option 2
it not good idea but it will solve it
You can add the same content to the column on the right but give it opacity:0;
I have a container, within which is a row of columns. I am trying to create 3 columns with fields and a full height vertical separator between each. I am using 24 column grid system with Bootstrap.
I can't seem to get the line to dynamically go full height; tried playing with parent div's height, absolute positioning, etc...
<div class="row">
<div class="col-md-7">
content
</div>
<div class="col-md-1 vertical-stroke">
<div class="col-md-7">
content
</div>
<div class="col-md-1 vertical-stroke">
<div class="col-md-7">
content
</div>
Two concepts I've been playing with are:
.vertical-stroke {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: #fff;
}
Above causing everything to get out of whack, displaying a giant line not at all where I intended.
and below, which displays a very short line... even though it's parent div is the full row which has a much taller height
.vertical-stroke {
height: 100%;
width: 1px;
background-color: #fff;
}
1) How can I create a full height vertical line?
I'm building a layout using Bootstrap 3 grids that should stack as follows:
Desktop:
1 | 2
1 | 2
- | 2
3 | 2
Mobile:
1
1
-
2
2
2
2
-
3
On another post I found a solution that floats the box2 to the right so that the grids stack correctly on the desktop. However, that only works when box2 is higher than box1. If it is not, box3 will show below box2 instead of box1. Is there any other way to stack these boxes as visualized above? All three boxes can have different heights and contain any number of lines of text, images, tables, etc.
http://jsfiddle.net/G9WPv/
This is very possible with CSS, and you can do this with Bootstrap's grid layout. In terms of solving this, you need to exploit the properties of right vs left float.
Demo: http://www.bootply.com/l0Flnma2Im
Consider the following sample. You'd expect this to show up 100% as intended on xs viewports, because each would be 100% width in the order you want. And, you'd expect it to show up as intended on md/lg browsers as well with the 1/3 on the left, but 2 on the right.
<div class="col-xs-12 col-md-6">
<div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6">
<div>3</div>
</div>
Now, the only issue that arises is when the "1" block expands larger than the "2" block. When this happens, 3 appears on the right. Why is this happening? It happens because the float is simply trying to fill in the empty gap on the right. However, we can force it to always be on the left by using clear: left; to ensure nothing appears to the left of it.
.always-left {
clear: left;
}
The code now becomes:
<div class="col-xs-12 col-md-6">
<div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6 always-left">
<div>3</div>
</div>
This is very possible to do using just media queries and some absolute positioning.
Look at this fiddle
You need to wrap your 3 divs inside a container.
essentially your css will look something like this.
.container {
width: 100%;
position: relative;
}
#box1 {
background-color: #d7d7d7;
width: 100%;
}
#box2 {
background-color: #e7e7e7;
width: 100%;
position: relative;
}
#box3 {
background-color: #f7f7f7;
width: 100%;
}
#media screen and (min-width: 700px) {
#box1, #box3 {
width: 40%;
}
#box2 {
width: 60%;
position: absolute;
top: 0;
right: 0;
}
}
The boxes can be of any size and on a mobile size screen they will stack in the correct order.
of course with the bootstrap gird system there might be a little tweaking involved to get it just right... but this is the essence of it.
Peace.