Bootstrap Responsive 2 span6 inside span12 not side by side. Any idea?
http://jsfiddle.net/6TaQt/24/
<div class="MainDiv container-fluid" style="border:1px solid pink">
<div class="row-fluid">
<div class="span12" style="border:1px solid green">
<div class="span6" style="border:1px solid red">Span A</div>
<div class="span6" style="border:1px solid red">Span B</div>
</div>
</div></div>
........Live demo................
Hi now used to display:inline-block;
as like this
[class*="span"], .row-fluid [class*="span"]{
display:inline-block;
vertical-align:top;
}
Live demo
use float: left for both of the span6 classes
like : style="border:1px solid red; float:left"
Related
I want to make a table with angular-material, like this:
<div class="xo-container" layout="column" layout-align="center center">
<div layout="row">
<div class="cell" flex="33">1</div>
<div class="cell" flex="33">2</div>
<div class="cell" flex>3</div>
</div>
<div layout="row">
<div class="cell" flex="33">1</div>
<div class="cell" flex="33">2</div>
<div class="cell" flex>3</div>
</div>
<div layout="row">
<div class="cell" flex="33">1</div>
<div class="cell" flex="33">2</div>
<div class="cell" flex>3</div>
</div>
</div>
And i want to be seen just inner borders of this structure. How can I do this?
In your case you need to define three row class as first-row, row and last-row for top and bottom border and three cell class as first-cell , cell and last-cell for left and right side border.
CSS file
div.first-row div{
border-bottom: 1px solid black;
}
div.row div{
border-top: 1px solid black;
border-top: 1px solid black;
}
div.last-row div{
border-top: 1px solid black;
}
div.first-cell {
border-right: 1px solid black;
}
div.cell {
border-right: 1px solid black;
border-left: 1px solid black;
}
div.last-cell {
border-left: 1px solid black;
}
HTML File
<div layout="column" flex style='background-color:red'>
<span flex="10"></span>
<div layout="row" class="first-row">
<div class="first-cell" flex="33">Content 1</div>
<div class="cell" flex="33">Content 2</div>
<div class="last-cell" flex>Content 3</div>
</div>
<div layout="row">
<div class="first-cell" flex="33">Content 11</div>
<div class="cell" flex="33">Content 22</div>
<div class="last-cell" flex>Content 33</div>
</div>
<div layout="row" class="last-row">
<div class="first-cell" flex="33">Content 111</div>
<div class="cell" flex="33">Content 222</div>
<div class="last-cell" flex>Content 333</div>
</div>
Here is working example. http://codepen.io/next1/pen/PNxxyR
I've created 3 div tags according to the grid rules
<div class="row">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
Div = Black
Div = Red
Div = Blue
Ranking musn't change and i would like to remove space between black and blue.
How can I remove it, So that black and blue divs should stand one under the other ?
<div class="left">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
<div class = "right> <div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div> </div>
Or you can do this, this will remove space in bootstrap grid.
Example
HTML
<div class="no-pad>
<div class="col-lg-12>
/*--Content--*/
</div>
</div>
CSS
.no-pad [class*="col-"] {
padding:0;
margin: 0;
}
You can acomplish this behavior with only 2 columns: left column (col-xs-3) and right column (col-xs-9).
Then you create 2 additional div elements in the left column, one for each element. Since the div is a block element, you will end up with one div bellow the other.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3">
<div style=" border:1px solid black;">
black
</div>
<div style="border:1px solid blue;">
blue
</div>
</div>
<div class="col-xs-9" style="border:1px solid red;">
red
</div>
</div>
Since you don't want to change the order of the elements, you could try something like the snippet bellow.
However i would recommend you reading more about the grid system. You're supposed to have a maximum of 12 columns in every row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3" style="border: 1px solid #000">
black
</div>
<div class="col-xs-9 pull-right" style="border: 1px solid #f00">
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
</div>
<div class="col-xs-3" style="border: 1px solid #00f">
blue
</div>
</div>
According with the grid that provided bootstrap-grid you have to made some modifications like this:
<div class="row">
<div class="col-md-3" style=" border:1px solid;">
<uc1:ucretsizilan runat="server" ID="ucretsizilan" />
<div class="row">
<div class="col-md-12" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
</div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
</div>
How can a bootstrap grid be styled with a simple header like the picture below?
When I try changing the background color of the first row, the color doesn't extend to the edge of the grid because of the grid padding. When I remove the left/right grid padding, it messes up the rounded corners.
The html looks like this:
<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px">
<div class="row-fluid">
<div class="span3">Name</div>
<div class="span3">Count</div>
</div>
<div class="row-fluid">
<div class="span3">Joe</div>
<div class="span3">10</div>
</div>
<div class="row-fluid">
<div class="span3">Bob</div>
<div class="span3">7</div>
</div>
</div>
Does this help? rounded corners on divs with background color.
<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px">
<div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;">
<div class="span3">Name</div>
<div class="span3">Count</div>
</div>
<div class="row-fluid">
<div class="span3">Joe</div>
<div class="span3">10</div>
</div>
<div class="row-fluid">
<div class="span3">Bob</div>
<div class="span3">7</div>
</div>
</div>
This is one of those cases where you probably should be using a table. Screen reader users will appreciated it, and Bootstrap has styles built in that should help.
http://twitter.github.com/bootstrap/base-css.html#tables
I have following html codes
<div align="center" style="width:1000px;border:1px solid green;">
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid black; overflow: hidden;" id="endText">
xxx<p> </p><p> </p><p>x</p>
</div>
<div style="clear:both"></div>
</div>
It works very fine in FF,Opera,Safari,Chrome, But in IE it shows wrong things. IE request predefined height for endText div for example
<div style="border:1px solid black; overflow: hidden;height:117px; " id="endText">
What is the problem? Which addional CSS code may keep its visual properties in IE as like as other browsers?
You are in correct way. Please add any tag after your code and make #endText height as 100%.
It would be works as other browsers.
<div align="center" style="width:1000px;border:1px solid green;">
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid red;float:left; width:200px; ">
ssssssssssss </div>
<div style="border:1px solid black; height:100%" id="endText">
xxx<p> </p><p> </p><p>x</p>
</div>
<div style="clear:both"></div>
</div> <hr>
Try floating #endText right and specifying a width? below i have used 594px as the borders are adding width.
<div align="center" style="width:1000px;border:1px solid green;">
<div style="border:1px solid red;float:left; width:200px;">
ssssssssssss
</div>
<div style="border:1px solid red;float:left; width:200px;">
ssssssssssss
</div>
<div style="border:1px solid black; overflow: hidden; float: right; width: 594px" id="endText">
xxx<p> </p><p> </p><p>x</p>
</div>
<div style="clear:both"></div>
</div>
Try to use positioning in CSS check out w3schools for how to make divs overlap, fixed etc
<div style="width: 800px;border:1px solid black">
<div style="width:100px;height:100px;float:left;border:1px solid black"></div>
<div style="float:left">ssdfsdfsdfsdgfag25w6a4g8w5614w5sge16dgf45d4sdffffffffffffffffffffffffffffffffffffffffffffffffffffff5s4f64s6f456a46f456a456456456f456we4f54we5gf45456v4sd5646sadf54s56f465as4f564as56f</div>
<div style="clear:both"></div>
</div>
It end up like this:
how to fix it
put a width on the 2nd child div. you will also need to put a space in that string as it cannot wrap it across lines.
<div style="width: 800px;border:1px solid black">
<div style="width:100px;height:100px;float:left;border:1px solid black"></div>
<div style="float:left; width: 100px">ssdfsdfsdfsdgfag25w6a4g8w5614w5sge16dgf45d4sdffffffffffffffffffffffffffffffffffffffffffffffffffffff5s4f64s6f456a46f456a456456456f456we4f54we5gf45456v4sd5646sadf54s56f465as4f564as56f</div>
<div style="clear:both"></div>
</div>
Set height to 100 to for main div