I'm implementing a Bootstrap 4 Grid. I've noticed that if I set a max-width on the container, the rows become uneven in length.
Here is an example:
.container {
max-width: 500px !important;
}
.purple-row [class^="col"] {
background-color: rgba(232, 179, 254, 0.5);
border: 1px solid rgba(232, 179, 254, 0.75);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row purple-row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
<div class="row purple-row">
<div class="col">col-4</div>
<div class="col">col-4</div>
<div class="col">col-4</div>
</div>
</div>
Why is this? Are the column flex-basis percentages not exact? Maybe it's something simple I'm missing, but I appreciate the help here.
Here is a CodePen Demo to experiment with this.
Bootstrap 4 lets you set the container max-width via its $container-max-widths variable. However when I do this, I get the problem I described.
The second row has classes called col, whereas the first row has classes called col-8 and col-4. By simply making the other col's also col-4's, it solves the problem: JSFiddle.
This appears to be a consequence of using percentage max-widths for the elements. I was able to solve the problem by adding the following CSS:
.purple-row [class^="col"] {
flex-grow: 1;
max-width: 100%;
}
Related
This is what I want to achieve in Bootstrap:
The first one I can achieve by defining B and C under the common div.
The second one I can achieve by defining C separately on the new row.
I don't know how to get both of them.
I don't think it possible with just bootstrap, since it use flex-layout base class, and it can't do what you want (correct me if i'm wrong though, i haven't touch bootstrap much since v4 come out).
So what i'm suggest here is a custom grid-layout base class to the parent div of all 3 childs, which you can use with media query to custom layout the way you want. All other bootstrap classes can still use as normal otherwise. Basically i create a table like area with pre-defined sections, then i 'attach' the childs to their desire location.
*HTML
<div class="container">
<div class="row grid">
<div class="col_a col-6 col-md-12">Col A</div>
<div class="col_b col-6 col-md-12">Col B</div>
<div class="col_c col-12">Col C</div>
</div>
</div>
*CSS
.col_a {
background: red;
}
.col_b {
background: yellow;
}
.col_c {
background: green;
}
#media screen and (min-width: 768px) {
.grid {
display: grid;
grid-template-areas: "left right-top" "left right-bottom";
}
.col_a {
grid-area: left;
}
.col_b {
grid-area: right-top;
}
.col_c {
grid-area: right-bottom;
}
}
Demo - resize screen to see the effect.
I have a structure such as :
<div class='container'>
<div class='half-screen'></div>
<div class='half-screen'></div>
<div class='half-screen'></div>
<div class='half-screen'></div>
</div>
I have to add divs dynamically and I'm wondering if there's a way to create the relationship dynamically so that a bar is inserted before every two divs with the half-screen class, i.e. before every 2n+1 div.half-screen.
There may be other ways to restructure and use css for top-border on each half screen but I'm curious to know if I can solve this using the + css adjacent operator
.container {
&.half-screen + .half-screen + .half-screen {
&:before {
border-top: 1px solid #ccc;
display:block;
}
}
}
I think you were on the right track with 2n+1 and :before, just missing a couple steps, unless I'm misunderstanding. Is this what you're trying to achieve?
.half-screen:nth-child(2n+1):before {
content: '';
width: 100%;
margin: 10px 0;
height: 1px;
background: black;
display: block;
}
<div class='container'>
<div class='half-screen'>1</div>
<div class='half-screen'>2</div>
<div class='half-screen'>3</div>
<div class='half-screen'>4</div>
<div class='half-screen'>5</div>
<div class='half-screen'>6</div>
</div>
No, you can't.
I know you're thinking .a + .a + .a matches the third element with a class of a, but keep in mind it also matches the fourth element with a class of a. CSS doesn't really say "Oh, we already used that element for this selector, we won't use it again."
I am trying to code a special background that keeps himself centered on screen. So I used div and pseudo elements to do so, but I keep getting a undesired "margin" between my divs and their pseudo elements, specially in small screen devices.
Screenshot from my phone showing some white undesired margins
Any idea on how to prevent this 'margins'?
Thank you very much!
*,*:after,*:before,body{margin:0;padding:0;border:0}
.row{width:100%;display:inline-flex}
.cont1920{width:100%;max-width:1920px;float:left;margin:auto;background:#8dbb70;position:relative;overflow:hidden}
.artw{width:1920px;position:absolute;left:50%;margin-left:-960px}
.h23{height:910.77px}
.rec2,.rec3{position:relative;background:#3F7F7D;content:''}
.rec2{width:631.10px;height:441.33px}
.rec3{width:631.10px;height:469.44px}
.rec2:after,.rec3:after{width:0;height:0;border:0;content:'';position:absolute}
.rec2:after{
right:-167.26px;
border-left:167.26px solid #3F7F7D;
border-bottom:441.33px solid transparent;
}
.rec3:after{
right:-396.37px;
border-left:396.37px solid #3F7F7D;
border-top:469.44px solid transparent;
}
<div class='row'>
<div class='cont1920 h23'>
<div class='artw'>
<div class='rec2'></div>
<div class='rec3'></div>
</div>
</div>
</div>
Try minifying your html as well during build. If we do indentation in HTML sometime some browsers add hairline space between them while rendering.
Add some padding to .rec2:after, .rec3:after
.rec2:after,.rec3:after{
padding: 2px;
width:0;
height:0;
border:0;
content:'';
position:absolute;
}
By the way, I don't recommend using width and height like you're doing in your css code, example: width:631.10px; height:469.44px, because if you want to make it responsive and perfect in all devices you should use % instead of px. I guess you're learning or/and trying something new.
Look this error when using px and when your design/page isn't using responsive design (and not using meta:viewport):
So there is white space and the design not fill the whole screen
*,*:after,*:before,body{margin:0;padding:0;border:0}
.row{width:100%;display:inline-flex}
.cont1920{width:100%;max-width:1920px;float:left;margin:auto;background:#8dbb70;position:relative;overflow:hidden}
.artw{width:1920px;position:absolute;left:40%;margin-left:-960px}
.h23{height:910.77px}
.rec2,.rec3{position:relative;background:#3F7F7D;content:''}
.rec2{width:631.10px;height:441.33px}
.rec3{width:631.10px;height:469.44px}
.rec2:after,.rec3:after{width:0;height:0;border:0;content:'';position:absolute}
.rec2:after{
right:-167.26px;
border-left:167.26px solid #3F7F7D;
border-bottom:441.33px solid transparent;
}
.rec3:after{
right:-396.37px;
border-left:396.37px solid #3F7F7D;
border-top:469.44px solid transparent;
}
<div class='row'>
<div class='cont1920 h23'>
<div class='artw'>
<div class='rec2'></div>
<div class='rec3'></div>
</div>
</div>
</div>
Back in the 2003, when my templates where cut into a tables, I used to position all the text how I wanted.
I know it's a newbie question and I should probably take some beginner css courses, but the question is - how to position text with as little fuss as possible like that:
start at 0 px start at 100px start at 300px
For the example you post in your question, I would go about it something like this:
span {
display: inline-block;
}
span:nth-of-type(1) {
width: 99px;
}
span:nth-of-type(2) {
width: 199px;
}
<span>Start at 0px</span>
<span>Start at 100px</span>
<span>Start at 300px</span>
HTML
<div class="item start0">
start at 0px
</div>
<div class="item start100">
start at 100px
</div>
<div class="item start300">
start at 300px
</div>
CSS
.item{
float:left;
}
.start0{
width:100px;
}
.start100{
width:200px;
}
.start300{
width:100px; // example
}
Width is the best bet. If you're going to use a div, you need to float left or the divs will be pilled up.
I want to adjust the columns in Twitter Boοtstrap.
I know in bootstrap there are 12 columns grid. Is there any way to manipulate the grids to have 1.5 3.5 3.5 3.5 instead of 3 3 3 3?
You cloud also simply override the width of the Column...
<div class="col-md-1" style="width: 12.499999995%"></div>
Since col-md-1 is of width 8.33333333%; simply multiply 8.33333333 * 1.5 and set it as your width.
in bootstrap 4, you will have to override flex and max-width property too:
<div class="col-md-1" style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"></div>
As #bodi0 correctly said, it is not possible. You either have to extent Bootstrap's grid system (you can search and find various solutions, here is a 7-column example) or use nested rows e.g. http://bootply.com/dd50he9tGe.
In the case of nested rows you might not always get the exact result but a similar one
<div class="row">
<div class="col-lg-5">
<div class="row">
<div class="col-lg-4">1.67 (close to 1.5)</div>
<div class="col-lg-8">3.33 (close to 3.5)</div>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-6">3.5</div>
<div class="col-lg-6">3.5</div>
</div>
</div>
</div>
The short answer is no (technically you can give whatever name of the class you want, but this will have no effect, unless you define your own CSS class - and remember - no dots in the class selector). The long answer is again no, because Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
A possible solution to your problem is to define your own CSS class with desired width, let's say .col-half{width:XXXem !important} then add this class to elements you want along with original Bootstrap CSS classes.
Bootstrap 4 uses flex-box and you can create your own column definitions
This is close to a 1.5, tweak to your own needs.
.col-1-5 {
flex: 0 0 12.3%;
max-width: 12.3%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
I have created a custom bootstrap extension that allows you to use the following classes:
// replace * with a number between 0 and 11
col-*-1qtr
col-*-half
col-*-3qtr
Also note that you can use responsive classes, such as:
col-sm-2-half (2.5)
col-md-0-3qtr (0.75)
col-lg-11-1qtr (11.25)
col-xl-5-half (5.5)
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/fractional-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Using fraction of columns</h2>
<div class="row">
<div class="col-2-3qtr bg-success">col-2-3qtr (2.75)</div>
<div class="col-3-1qtr bg-warning">col-3-1qtr (3.25)</div>
<div class="col-3-half bg-success">col-3-half (3.5)</div>
<div class="col-2-half bg-warning">col-2-half (2.5)</div>
</div>
</div>
</body>
</html>
Bootstrap has column offsets, so if you want columns with equal width without specifying size use this.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Also check out this link
https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints
Create new classes to overwrite the width. See jFiddle for working code.
<div class="row">
<div class="col-xs-1 col-xs-1-5">
<div class="box">
box 1
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 2
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 3
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 4
</div>
</div>
</div>
.col-xs-1-5 {
width: 12.49995%;
}
.col-xs-3-5 {
width: 29.16655%;
}
.box {
border: 1px solid #000;
text-align: center;
}
According to Rex Bloom response I have write a bootstrap helper:
//8,33333333% col-1
.extra-col {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-0-5 {
#extend .extra-col;
flex: 0 0 4.16666667%;
max-width: 4.16666667%;
}
.col-1-5 {
#extend .extra-col;
flex: 0 0 12.5%;
max-width: 12.5%;
}
.col-2-5 {
#extend .extra-col;
flex: 0 0 20.833333325%;
max-width: 20.833333325%;
}
.col-3-5 {
#extend .extra-col;
flex: 0 0 29.166666655%;
max-width: 29.166666655%;
}
.col-4-5 {
#extend .extra-col;
flex: 0 0 37.499999985%;
max-width: 37.499999985%;
}
.col-5-5 {
#extend .extra-col;
flex: 0 0 45.833333315%;
max-width: 45.833333315%;
}
.col-6-5 {
#extend .extra-col;
flex: 0 0 54.166666645%;
max-width: 54.166666645%;
}
.col-7-5 {
#extend .extra-col;
flex: 0 0 62.499999975%;
max-width: 62.499999975%;
}
.col-8-5 {
#extend .extra-col;
flex: 0 0 70.833333305%;
max-width: 70.833333305%;
}
.col-9-5 {
#extend .extra-col;
flex: 0 0 79.166666635%;
max-width: 79.166666635%;
}
.col-10-5 {
#extend .extra-col;
flex: 0 0 87.499999965%;
max-width: 87.499999965%;
}
.col-11-5 {
#extend .extra-col;
flex: 0 0 95.8333333%;
max-width: 95.8333333%;
}
This is not Bootstrap Standard to give col-md-1.5 and you can not edit bootstrap.min.css because is not right way.
you can create like this http://www.bootply.com/125259
As others mentioned in Bootstrap 3, you can use nest/embed techniques.
However it is becoming more obvious to use pretty awesome feature from Bootstrap 4 now. you simple have the option to use the col-{breakpoint}-auto classes (e.g. col-md-auto) to make columns size itself automatically based on the natural width of its content. check this for example
you can use this code inside col-md-3 , col-md-9
.col-side-right{
flex: 0 0 20% !important;
max-width: 20%;
}
.col-side-left{
flex: 0 0 80%;
max-width: 80%;
}
This question is quite old, but I have made it that way (in TYPO3).
Firstly, I have made a own accessible css-class which I can choose on every content element manually.
Then, I have made a outer three column element with 11 columns (1 - 9 - 1), finally, I have modified the column width of the first and third column with CSS to 12.499999995%.