Suppose I had a table of elements with varying widths. Is it possible using just Bootstrap/css to break all rows when one row is too large to fit? For example:
<div class="container-fluid">
<div class="row">
<div class="col">ShortLabel</div>
<div class="col-xs-auto num">1111111111</div>
</div>
<div class="row">
<div class="col">SomeReallyReallyBigHugeMcLargeLooooooooongLabel</div>
<div class="col-xs-auto num">2222222222</div>
</div>
<div class="row">
<div class="col">ShortLabel2</div>
<div class="col-xs-auto num">3333333333</div>
</div>
</div>
.row {
margin 20px;
}
.col {
border: solid 1px black;
padding: 10px;
}
.col-xs-auto {
border: solid 1px black;
padding: 10px;
}
.num {
text-align: right;
}
Ideally when the size of the container becomes too small to fit the second row, I want to maintain the behavior where it breaks the row into two lines, but have it happen for all rows simultaneously. See https://jsfiddle.net/wt6dLav4/2/
Related
I need to achieve an even distribution of pills inside a div for all 4 major screen sizes using flexbox. The smaller the screen size less divs are to be fit to a single row. The rest of the divs should be placed on the next row. The number of divs to distribute is not known beforehand. Each pill is going to receive a word inside so a min guaranteed width is needed.
Here's a picture of what the outcome for various screen sizes might look like for a single row. How do I go about doing smth like this?
something like this:
.row {
display: flex;
flex-flow: row wrap;
list-style: none;
padding-bottom: 12px;
}
.pill {
min-width: 50px;
max-width: 200px;
margin-right: 12px;
margin-bottom: 12px;
text-align: center;
padding: 6px;
border: 2px solid;
border-radius: 50%;
flex: 1 0 0;
}
.pill:last-child {
margin-right: 0;
}
<div class="row">
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
</div>
<div class="row">
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
</div>
<div class="row">
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
</div>
<div class="row">
<div class="pill">foo</div>
</div>
You can adjust the min and max width of the pill elements according to your needs.
I'm trying to add space between columns (which are inside a container with "display: flex;"), but for example let's say I have 2 columns columns with 50% width if I add margin to any of them. The only way I thought of "adding" some space between columns so they would not stick together is to create another container just to add margin,bg-color, padding etc.
Example of a grid based on 12 columns, where everything happens normally:
<!DOCTYPE html>
<html>
<head>
<style>
*,
*::after,
*::before {
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-flow: row wrap;
}
/* based on 12 columns */
.col-hd-3 {
width: 25%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-hd-3" style="background-color: red;">
test
</div>
<div class="col-hd-3" style="background-color: green;">
test
</div>
<div class="col-hd-3" style="background-color: yellow;">
test
</div>
<div class="col-hd-3" style="background-color: grey;">
test
</div>
</div>
</body>
</html>
Now, let's say I add margin to any column:
<! ---->
<div class = "row">
<div class = "col-hd-3" style = "background-color: red; margin: 12px;">
test
</ div>
<! ---->
the last column will go to the next line.
So the only thing that solves it is something like:
<!---->
<div class="row">
<div class="col-hd-3">
<div style="margin: 12px; padding: 5px; background-color: red;">
Test
</div>
</div>
<!---->
Am I sure about the solution, or is this something done wrong?
So as you are using display: flex you need to set flex-grow: 1; and flex-basis: 0; on your column or simply set flex: 1;.
Read: https://www.w3schools.com/cssref/css3_pr_flex.asp
The flex-grow defines the ability for a flex item to grow if necessary, and the flex-basis defines the default size of an element before the remaining space is distributed.
So:
.col-hd-3 {
max-width: 25%; /* COLUMN WILL NOT BE WIDER THAN 25% */
margin: 12px;
flex-basis: 0;
flex-grow: 1;
}
or you can use the flex shorthand:
.col-hd-3 {
max-width: 25%; /* COLUMN WILL NOT BE WIDER THAN 25% */
margin: 12px;
flex: 1;
}
*,
*::after,
*::before {
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-flow: row wrap;
}
/* based on 12 columns */
.col-hd-3 {
width: 25%;
margin: 12px;
flex-basis: 0;
flex-grow: 1;
}
<div class="row">
<div class="col-hd-3" style="background-color: red;">
test
</div>
<div class="col-hd-3" style="background-color: green;">
test
</div>
<div class="col-hd-3" style="background-color: yellow;">
test
</div>
<div class="col-hd-3" style="background-color: grey;">
test
</div>
</div>
I am trying to understand Bootstrap, however - I can't figure out why this ain't working on xs. I have a total of 12 columns, but it still puts the col-xs-11 beneath the col-xs-1.
CSS:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
Result on xs:
with border-css
without border-css
Could someone tell me what I am missing here? The 2-8-2 is working properly, but the 1-11 not.
I am working on the latest version of Firefox + I am using Bootstrap version 3, not 4.
Edit 1:
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
What's happening is that your col-xs-1 column is reaching its minimum width based on its padding and content, and can't go any smaller. This means the col-xs-11 doesn't have enough space and is being pushed to the next line.
The problem is that the cols have 15px left & right padding so even if it was empty you col can't go any smaller than 30px.
Usually you would redistribute the cols on the smallest screen to allocate more space for the smallest cols, e.g.
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
However if that isn't an option, you could use media queries to adjust the padding for smaller screens, e.g.:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
#media (max-width: 400px){
[class^="col-"] {
padding-left:5px;
padding-right:5px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
(Note, the media query isn't working in the snippet for some reason, but this code does work in a standalone html page!)
Is it possible to create a CSS rule that applies to the every element except for the first 8 elements? Ie, the 8th plus elements should have a margin top of 65px.
My below less code applies margins to every odd and even button within a menu. Now I want to add a specific margin to the 8th plus buttons. And then ideally apply a specific margin to the 16th plus buttons and so on.
.foo-menu {
.foo-menu-btn {
float: left;
margin: 1px;
}
// Apply specific margin to every second(even) button
.foo-menu-btn:nth-child(even) {
margin-left: -23px;
margin-top: 46px;
}
// Apply specific margin to every odd button
.foo-menu-btn:nth-child(odd) {
margin-left: -23px;
}
// For every button after the 8th one; apply a specific margin
.foo-menu-btn:nth-child( ??? ) {
margin-top: 65px;
}
}
<div class="foo-menu">
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
</div>
Try below code, i think help full to you.
hr {
display: block; float: left;
width: 50px; height: 50px;
border: solid 2px #aaa; margin: 10px;
}
hr:nth-child(n+9):not(:nth-last-child(-n)) {
background-color: #ddd;
}
<div id=t>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
You can use the native CSS :nth-child pseudo-class to specify a range. According to the case you specified it might look like this:
div.foo-menu div.foo-menu-btn:nth-child(n+8):nth-child(-n+15) {
margin-left: 50px
}
The downside is that you still have to manually define each range.
To select everything other than the first 8 divs you can use .foo-menu-btn:nth-child(n+9). See it applied to your HTML below (I took out the negative margins so that the divs would be visible for this example):
.foo-menu-btn {
float: left;
margin: 1px;
background-color: #ccc;
height: 1rem;
}
.foo-menu-btn:nth-child(even) {
margin-top: 46px;
}
.foo-menu-btn:nth-child(n+9) {
margin-top: 65px;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Use :
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
.foo-menu .foo-menu-btn:nth-child(odd){
color: red;
}
.foo-menu .foo-menu-btn:nth-child(even){
color: green;
}
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
I am having a problem getting the bootstrap grid to display properly. My code is as follows
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
All I see is:
grid
Anyone know what's happening here? I have all the bootstrap.css, bootstrap-theme.css, and bootstrap.js properly included. Other things such as buttons are bring properly formatted by bootstrap.
As far as I see your 2 div's are formatted as they should? (Using Boostraps md-6).
You don't need the .col-md-6 value in your div though:
<div class="container">
<div class="row">
<div class="col-md-6">Your text here</div>
<div class="col-md-6">Your text here</div>
</div>
</div>
For more information check out the official Bootstrap Documentation page on Grid Templates
For the grid view used in the documentation (grid.css) add the following CSS:
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
Modify as below
<div class="container show-grid">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
add the following css to your style sheet
.show-grid div{
border:1px solid ;
}
Bootstrap makes an "invisible" grid if you want to see it that way, if you want to make the grid visible you can do it with css either adding a background color or border, my favorite is background color:
css:
.y0 { background-color: #CCC; }
.y1 { background-color: #9FF; }
.y2 { background-color: #F9F; }
.y3 { background-color: #F99; }
.y4 { background-color: #FF6; }
.y5 { background-color: #3C3; }
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 y0">Your text here</div>
<div class="col-md-6 y1">Your text here</div>
</div>
</div>