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.
Related
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/
I am working on a questionnaire design, which can have one or more answers, something like this:
This looks alright for 3 or more answers as in the above screenshot. However, when there's a single or couple of answers, they are taking too much space, resulting in this:
How can I make the boxes smaller if there are fewer answers, still making them look good, i.e. centered and with proper spacing, etc.?
Here's a working code sandbox where you can see what I have so far.
Maybe you may need a different approach with only flexbox
/* custom class */
.box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 150px;
height: 150px;
border: 2px solid black;
margin: 2px;
}
/* responsivity class */
.responsive {
width: 100%;
display: flex;
margin: 0 auto;
}
.center-placer {
width: max-content;
margin: 0 auto;
}
<div class="responsive">
<div class="center-placer">
<div class="box">
A
</div>
<div class="box">
B
</div>
<div class="box">
C
</div>
<div class="box">
D
</div>
<div class="box">
E
</div>
</div>
</div>
<div class="responsive">
<div class="center-placer">
<div class="box">
A
</div>
<div class="box">
B
</div>
</div>
</div>
<div class="responsive">
<div class="center-placer">
<div class="box">
C
</div>
</div>
</div>
So, I am creating a grid system based on flexbox and everything is going quite swimmingly. The basics of my grid are:
<div class="row">
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
</div>
And in my css:
.row {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
}
.column {
padding: 10px;
flex: 1 1 0%;
}
Essentially, this makes the columns quite fluid, and they shrink/grow to fill all available space. This is great for me as I need to use this throughout various projects where I can't quite customize the grid for every single one. However, I have run into a small "issue". I was going to create a class called ".collapse" so I could collapse the left/right padding to have some columns fit right next together (for example: If I wanted a div with a background color (by adding a color class to the column=> .column .green) flush to an image in the next column). However, the spacing is all out of wack compared to row/columns above it.
<div class="row">
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
</div>
example screenshot here
As you can see in my little example mockup, they do kinda line up, but the right and left margins have "decreased". Is there any smart way around this? I tried adding "left/right margins" to the first-of-type and last-of-type, but this just gets a bit hacky as then anything added in between start having odd alignment issues.
For this kind of grid system, you usually would discourage using structural styling on the grid cells directly, and it lets you do something like this:
.row {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
margin-left: -10px;
}
.column {
flex: 1 0 0;
padding-left: 10px;
}
.collapse { margin-left: 0; }
.collapse > .column { padding-left: 0; }
.red,
.purple {
padding: 10px;
margin-bottom: 10px;
}
.red { background-color: red; }
.purple { background-color: purple; }
<div class="row">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
<div class="row collapse">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
This approach uses no margins on the outer ends, which I find way more convenient.
It's worth noting that this kind os system is not all that useful anymore, with the advent of CSS Grid Layout, but there you have it.
On a side note, 0 is always 0, and it never needs a unit.
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!)
JSFIDDLE
I have a case where I want my bootstrap columns to horizontally center themselves.
To achieve this, I have used the following rules
CSS:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
Then If 4 columns are there they should come in a line. And if there are 3 columns then they should be centered.
HTML:
<!-- The fourth column falls down -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
It works fine if I have just 1,2 or 3 columns but when I get 4 columns, one of the columns falls down to a new line. To solve this issue, I have tried reducing the width to say 24.7%. But again this does not work in all screens. So I have to keep changing the width.
I would love to know why width 25% is not taking the 25% width and falling down. And how to solve this issue and keep them always in the center.
JSFIDDLE
You should create a special class (ie: row-centered) for this case, and not override the Bootstrap grid.
.row-centered > div {
display: inline-block;
float: none;
}
http://www.codeply.com/go/EXmotvfGtG
Please remove:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
and you can add to the .row class:
.row {
display: flex;
justify-content: center;
}
If you're using bootstrap v4 there are added flexbox classes, which you can use:
https://v4-alpha.getbootstrap.com/utilities/flexbox/
Give display: flex to the row. Using this method will work in all screens.
Fiddle
div[class^=col-] {
float: none;
display: inline-block;
vertical-align: top;
width: 25%;
}
body {
color: white;
}
.row {
margin-bottom: 50px;
display: flex;
}
.col-1 {
background: red;
}
.col-2 {
background: blue;
}
<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/23502342/1366033'>Bootstrap 3 grid, does it *really* matter how many columns are in a row?</a><br/>
Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>