I am trying to create a background color for my row, yet when I set a background color it extends over the regular width of my columns.
Then I tried making the row smaller with padding, which works, but makes the columns smaller.
I need to somehow remove the pink area, keep only the red background, AND keep the columns even.
Any ideas?
<!-- When applying the padding, the columns background turns OK. However, the
columns themselves aren't as even as "normal" columns without padding -->
<div class="row" style="background-color: pink; padding-right: 15px; padding-left: 15px; ">
<div class="large-3 columns" style="background-color: red;">
text1
</div>
<div class="large-3 columns" style="background-color: red;">
text2
</div>
<div class="large-3 columns" style="background-color: red;">
text3
</div>
<div class="large-3 columns" style="background-color: red;">
text4
</div>
</div>
<!-- The background of the columns is same for all of the columns, and it's
bigger than the image because of the padding -->
<div class="row">
<div class="large-3 columns" style="background-color: teal;">
text1
</div>
<div class="large-3 columns" style="background-color: teal;">
text2
</div>
<div class="large-3 columns" style="background-color: teal;">
text3
</div>
<div class="large-3 columns" style="background-color: teal;">
text4
</div>
</div>
<!-- This image has a padding in the column, so it's not the whole width of
the row -->
<div class="row">
<div class="large-12 columns" style="background-color: grey;">
<img alt="slide image" src="http://placehold.it/1000x15">
</div>
</div>
One way is to remove column padding as this causes you to see the pink background in the row div and add margin for row to have them aligned.
.columns{
padding-left: 0rem;
padding-right: 0rem;
}
.row{
margin-left: 0.83333rem;
margin-right: 0.83333rem;
width:auto;
}
Here is a Fiddle
Related
I have a scenario where I need to center 3 divs of col3 in a row. When calculating, the answer shows 1.5, but what is the proper way of overcoming this challenge?
<div class="row">
<div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">
</div>
<div class="col-md-3" style="height: 50px; background-color: green">
</div>
<div class="col-md-3" style="height: 50px; background-color: orange">
</div>
</div>
Here is a fiddle: https://jsfiddle.net/DTcHh/25558/
col-md-offset-2 is messing this up because it leaves col-1 for the other end. If there was col-md-offset-1.5 that would be brilliant but apparently no :(
I tried adding paddings and margins and it started becoming very messy, and thought I am directing to the wrong way.
What is the proper way of center the 3 divs without any hacky way?
I've come to a solution by erasing the offset class from the first inner div, assigning that particular .row container an additional class (.x in my example) and adding the following CSS for that class:
.x {
width: 100%;
margin: 0 12.5%;
}
Here is a codepen with the complete code: http://codepen.io/anon/pen/bwRZyJ
Try removing offset, and changing 3 for 4.
<div class="row">
<div class="col-xs-4" style="height: 50px; background-color: red">
</div>
<div class="col-xs-4" style="height: 50px; background-color: green">
</div>
<div class="col-xs-4" style="height: 50px; background-color: orange">
</div>
</div>
This puts 3 divs in a row, taking 33% of screen each one
UPDATE:
<div class="container">
<div class="row col-xs-10 col-xs-offset-1">
<div class="col-xs-3" style="height: 50px; background-color: red">
</div>
<div class="col-xs-3" style="height: 50px; background-color: green">
</div>
<div class="col-xs-3" style="height: 50px; background-color: orange">
</div>
</div><!--row-->
</div><!--container-->
expected
I'm trying set 100% height in the nested row with the code below:
<div class="row">
<div class="col-md-4">
<!--This is not working-->
<div style="height:100%">
First Column, First Cell
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-xs-12">
Second Column, First Cell
</div>
<div class="col-xs-12">
Second Column, Second Cell
</div>
<div class="col-xs-12">
Second Column, Third Cell
</div>
</div>
</div>
</div>
But it output as
output
You can use Bootstrap Tables instead of rows and columns.
UPD. I've added coloured outlines for cells.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
td {
border: 0 !important;
outline: 4px solid;
outline-offset: -8px;
padding: 16px !important;
}
.red-box {
outline-color: red;
}
</style>
<div class="container">
<table class="table">
<tr>
<td rowspan="3" class="red-box">First Column, First Cell</td>
<td>Second Column, First Cell</td>
</tr>
<tr>
<td>Second Column, Second Cell</td>
</tr>
<tr>
<td>Second Column, Third Cell</td>
</tr>
</table>
</div>
I would suppose you're doing it in two column layout, you can do that using bootstrap by setting the parent div with height so that.
<div style="height=100%;">
First Column, First Cell
</div>
has the basis of 100% property,
For example:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="height: 100px;">
<div class="row" style="height: 100px;">
<div class="col-md-12" style="height: 100px;">
<div style="height:100%;border: 1px solid black;">
First Column, First Cell
</div>
</div>
</div>
</div>
<div class="col-md-6" style="height: 100px;border: 1px solid black;">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12">
Second Column, First Cell
</div>
<div class="col-xs-12">
Second Column, Second Cell
</div>
<div class="col-xs-12">
Second Column, Third Cell
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this help
I have a two column layout with nested columns on the left column. How would i vertically align the text in the right column to the middle in bootstrap?
I have tried setting top:50% but nothing happens. And i have also tried using the vertical-align:middle.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>
<div class="col-lg-6"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>
</div>
</div>
Cheers!
Not sure if it's exactly what you are after.
but you could set the height and then vertical align.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>
<div class="col-lg-6" style="height:700px"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>
</div>
</div>
Then add this css
/* CSS used here will be applied after bootstrap.css */
.box-section
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Problem is it won't be responsive with the set height values, however you could set that up seperately in the css
http://www.bootply.com/FOsl3LiKn1
I think that AceWebDesign answer is correct but you can achieve the same effect without setting the right column height and with the box section class as this:
.box-section{
margin-top:50%;
transform: translateY(-50%);
}
forked snippet: http://www.bootply.com/84dXtE0F2B
I'm using foundations grid. I've got a grid with two columns and would like to have the content of the right column scale to 100% the height of the left column.
I made a JSBin to illustrate my problem (you have to open the output in a seperate tab for some reasons).
That is how it looks:
div {
border: 1px solid #CCC;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<div class="row" style="width:50%">
<div class="small-8 columns">
<div class="row">
left column first row
</div>
<div class="row">
left column second row
</div>
<div class="row">
left column third row
</div>
<div class="row">
left column fourth row
</div>
<div class="row">
left column fifth row
</div>
<div class="row">
left column sixth row
</div>
<div class="row">
left column seventh row
</div>
<div class="row">
left column eigth row
</div>
<div class="row">
left column ninth row
</div>
</div>
<div class="small-4 columns">
<div class="row">
this is supposed to scale to 100% of the size of the left column
</div>
</div>
</div>
Try like this: Demo
CSS:
div {
border: 1px solid #CCC;
}
#row_box{
display:table;
}
.child{
display:table-cell;
background-color:red;
}
.child:nth-child(2)
{
background-color:yellow;
}
HTML:
<div class="row" style="width:50%">
<div id="row_box"> // added id row_box
<div class="large-8 child"> // added class child & removed columns
<div class="row">
left column first row
</div>
<div class="row">
left column second row
</div>
<div class="row">
left column third row
</div>
<div class="row">
left column fourth row
</div>
</div>
<div class="large-4 child"> // added class child & removed columns
<div class="row">
this is supposed to scale to 100% of the size of the left column
</div>
</div>
</div>
</div>
Note:
This -ve margin is coming from your css file.
So I am having trouble aligning 3 divs that are circles on my page.
Here is the HTML
<div class="row">
<div class="large-9 push-2 columns">
<div class="green"></div>
Donnez
</div>
<div class="row">
<div class="large-9 push-4 columns">
<div class="cyan"></div>
Recevez
</div>
</div>
<div class="row">
<div class="large-9 push-6 columns">
<div class="orange"></div>
Statistique
</div>
</div>
</div>
Here is the CSS :
.green, .cyan, .orange {
border-radius: 50%;
width: 15px;
height: 15px;
position: relative;
float: left;
}
.green {
background: #40b564;
}
.cyan {
background: #61cfcc;
}
.orange {
background: #f8765c;
}
Here is what it looks like :
http://4.ii.gl/V0DOyL.png
I basically want the 3 circles (3 divs) to be aligned properly horizontally. Now I have tried display : inline-block; and other things but nothing seems to work. I don't know if this has anything to do with the fondation framework ? I have been trying to figure this out for hours now, any help would be greatly appreciated !
You have them in seperate class="rows" that is why they are in seperate lines.
You have to place them in one Row.
<div class="row">
<div class="large-4 columns">
<div class="green"></div>
Donnez
</div>
<div class="large-4 columns">
<div class="green"></div>
Donnez
</div>
<div class="large-4 columns">
<div class="green"></div>
Donnez
</div>
</div>
Try this in your code, upload a new snapshot, I will see if I can help anymore.
Another Mistake I noticed is that (Not Related to your current layout):
<div class="large-9 push-6 columns">
<div class="orange"></div>
Statistique
</div>
You are doing large-9 push-6, the total should not be more than 12. In you case it is 9+6=15, it should be like large-9 push-3, large-8 push-4 or large-6 push-6 so that total is always 12