I trying to make uncommon layout with bootstrap, but pulls and pushes works in wierd way. Look at it:
http://jsfiddle.net/tfgdveop/1/
<div class="container" style="background: white">
<div class="row">
<div class="col-xs-3" style="background: red; height: 300px;">catalog</div>
<div class="col-xs-9" style="background: blue; height: 50px;">bNNER</div>
<div class="col-xs-3 col-xs-push-6" style="background: yellow; height: 500px;">News</div>
<div class="col-xs-6 col-xs-pull-3" style="background: green; height: 280px;">Catalog</div>
<div class="col-xs-6 col-xs-pull-6" style="background: pink; height: 100px;">Promo</div>
</div>
</div>
I need pink promo block 9 cols width, but if i made it wider 6, it fall under news block.
I changed order a bit and Yellow News to float to right. I also removed all unnnecessary pulls and pushes. Here is the result:
http://jsfiddle.net/tfgdveop/3/
<div class="container" style="background: white">
<div class="row">
<div class="col-xs-3" style="background: red; height: 300px;">catalog</div>
<div class="col-xs-9"style="background: blue; height: 50px;">bNNER</div>
<div class="col-xs-6"style="background: green; height: 280px;">Catalog</div>
<div class="col-xs-3 pull-right"style="background: yellow; height: 500px;">News</div>
<div class="col-xs-9" style="background: pink; height: 100px;">Promo</div>
</div>
</div>
Is this what you are looking for?
Related
I am using Flexbox and I am trying to create something like this:
I want the three "parent" boxes to be vertically aligned within the row. Each box have different height.
In the snippet (Codepen is better in this case as there was a character limit in Stack) I am trying to replicate the first box as a start, the boxes float to the top. They are not vertically aligned:
.box, .box-first, .box-large, .box-nested, .box-row {
position: relative;
box-sizing: border-box;
min-height: 1rem;
margin-bottom: 0;
background: #007FFF;
border: 1px solid #FFF;
border-radius: 2px;
overflow: hidden;
text-align: center;
color: #fff;
}
.box-nested {
background: #036;
border-color: #007FFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet"/>
<div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-12"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-2"> <div class="box-nested"> <img style="width:30px; height:auto;" src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png"/> </div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111 222</div><div class="box-nested">105,306</div></div></div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111</div><div class="box-nested">222</div></div></div><div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">105,306</div></div></div></div></div></div></div></div></div></div></div></div></div>
When I tried adding the for the display: flex; align-items: center; in the CSS it messes up with the nested divs:
I am not that familiar with Flexbox and I have seen many different versions online that don't help.
I have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.
#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}
#stimuliContainer {
height: 40%;
}
#stimuli {
width: 100%;
max-height: 100%;
}
#errorMsg {
height: 20%;
width: 100%;
}
#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>
<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>
I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.
In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: red;">
1 col
</div>
</div>
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: blue;">
2 col
</div>
</div>
</div>
</div>
CSS
.padding-2 {
padding-left: 2px;
padding-right: 2px;
}
Demo: http://www.bootply.com/eO033QYCn3
Try to use padding instead of margin, and then, if you want to have for example border, you can add another element inside this one with padding.
Here's an example:
<div class="container">
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
1 col
</div>
</div>
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
2 col
</div>
</div>
</div>
And demo:
https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview
Sample code
<div class="container">
<div class="row" style=" display: flex;">
<div style="width: 200px; height: 50px; background-color: #847"></div>
<div class="container" style=" height: 50px; background-color: #147">
<div class="row" style=" height: 20px; background-color: #997">
<div class="col-xs-3 col-md-6 col-lg-2 " style=" height: 10px; background-color: #927"></div>
<div class="col-xs-3 col-md-6 col-lg-6" style=" height: 10px; background-color: #947"></div>
</div>
</div>
</div>
</div>
I need:
12 indented cells in the child rows(seems it works)
at the same time, have cell width in px for right cell (flex saves me, but i see some error when i reduce browser width until the end, in safari)
http://codepen.io/anon/pen/zKXaoV
Help please, maybe it is not good solution and exists better one or how to fix? Thanks
For my project, I'm creating an app that allows users to paint pictures.
I managed to create the canvas and paint brush, and already know how to work the Javascript and Jquery.
The only problem I'm having is with creating the color palette.
HTML
<div id = "colors">
<div style="background: #990000;"></div>
<div style="background: #CC0000;"></div>
<div style="background: #CC3300;"></div>
<div style="background: #FFCC00;"></div>
<div style="background: #FFFF00;"></div>
<div style="background: #CCFF00;"></div>
<div style="background: #66FF00;"></div>
<div style="background: #003300;"></div>
<div style="background: #33FFCC;"></div>
<div style="background: #3300CC;"></div>
<div style="background: #660033;"></div>
<div style="background: #660066;"></div>
<div style="background: #000000;"></div>
<div style="background: #ffffff;"></div>
</div>
application.css
#colors {
width: 180px;
height: 30px;
}
I created a fiddle
http://jsfiddle.net/fqfbprd7/1/
If I add some text to the div, like I did in the fiddle, I see the colors rendered, but they are all on their separate line. Similar to paint, this should be a color selection box, where there are 7 colors per line. Just the colors though, and no text.
I even set the width and height attributes for my colors div, to render a color box.
Here the updated fiddle:
http://jsfiddle.net/fqfbprd7/2/
#colors div {
width: 25px;
height: 30px;
float: left;
}
Target the DIV's inside #colors and use position property value of inline-block to get them to display next to eahch other.
#colors div {
display: inline-block;
}
#colors {
width: 180px;
height: 30px;
}
#colors div {
display: inline-block;
}
<div id ="colors">
<div style="background: #990000">A</div>
<div style="background: #CC0000">B</div>
<div style="background: #CC3300">C</div>
<div style="background: #FFCC00">D</div>
<div style="background: #FFFF00">E</div>
<div style="background: #CCFF00">F</div>
<div style="background: #66FF00">G</div>
<div style="background: #003300">H</div>
<div style="background: #33FFCC">I</div>
<div style="background: #3300CC">J</div>
<div style="background: #660033">K</div>
<div style="background: #660066">L</div>
<div style="background: #000000">M</div>
<div style="background: #ffffff">N</div>
</div>
This probably is the most frequently asked question however I am not really able to find anything that seems to work for me - I am a newbie # styling/css.
I would like a cross browser compliant solution (IE9 or higher btw) where I can have as a header (first row) 3 columns:
Name_____DOB______Contact
underneath, there will be content. a row of data and I want the row of data (which is contained in a div) to be aligned correctly with the column headings.
Currently I have this:
<div style="width: 100%">
<div style="width: 300px; float:left">Name</div>
<div style="width: 200px; float:left">DOB</div>
<div style="width: 100px; float:left">Contact</div>
</div>
in terms of the data, I am using MVC4 with Razor so I am just using a for loop to go through a collection of data and spitting it out in a div i.e:
[for loop here]
<div id="refitem_#counter">
[data here]
</div>
[end for loop]
You can continue with the same approach.
<div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name</div>
<div style="width: 200px; float:left">DOB</div>
<div style="width: 100px; float:left">Contact</div>
</div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name 1</div>
<div style="width: 200px; float:left">DOB 1</div>
<div style="width: 100px; float:left">Contact 1</div>
</div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name 2</div>
<div style="width: 200px; float:left">DOB 2</div>
<div style="width: 100px; float:left">Contact 2</div>
</div>
..
</div>
I'm strongly dis-advise you to use that. use a table instead.
also (as a BTY): don't mix your markup and CSS, use something like that.
HTML:
<div>
<div>
<div class="column col1">Name</div>
<div class="column col2">DOB</div>
<div class="column col3">Contact</div>
</div>
<div>
<div class="column col1">Name 1</div>
<div class="column col2">DOB 1</div>
<div class="column col3">Contact 1</div>
</div>
<div>
<div class="column col1">Name 2</div>
<div class="column col2">DOB 2</div>
<div class="column col3">Contact 2</div>
</div>
..
</div>
CSS:
.column
{
float: left;
}
.col1
{
width: 300px;
}
.col2
{
width: 200px;
}
.col3
{
width: 100px;
}
width: 100%; is the default behaviour for a block element (like a div) so you should omit it.