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%.
Related
The following code is supposed to display blocks for mobile and desktop view in different ways.
<div class="col-12 col-sm-6 order-sm-1">TITLE</div>
<div class="col-12 col-sm-6 order-sm-0">IMAGE</div>
<div class="col-12 col-sm-6 order-sm-2 offset-sm-6">DESCRIPTION</div>
This code represents blocks on desktop in this way. On desktop view blocks IMAGE and TITLE will have same height.
--------------- ---------------
-----IMAGE----- -----TITLE-----
--------------- ---------------
--------------- ---------------
--------------- --DESCRIPTION--
--------------- ---------------
But I want to display these blocks (on desktop) in this way. Description block should be under title block. Both of them should represent right half of screen.
--------------- ---------------
--------------- -----TITLE-----
-----IMAGE----- ---------------
--------------- --DESCRIPTION--
--------------- ---------------
How I can do that?
Important to add that we can't use double blocks using hidden classes to switch its visibility in different views (because of SEO).
You can only use order on sibling elements.
The order property specifies the order of a flexible item relative to
the rest of the flexible items inside the same container.
A no JS solution with all the columns in the same container using Flex is definitely possible utilizing flex-basis, but there is a drawback...
... you need a height:
Use Dev Tools to watch them collapse below the small breakpoint.
.row {
height: 150px;
}
#media (min-width: 576px) {
.col:nth-child(2) {
flex: 0 100% !important;
background: lightblue;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 flex-column justify-content-sm-center">
<div class="col order-sm-2">TITLE</div>
<div class="col order-sm-1 d-flex justify-content-sm-center align-items-sm-center">IMAGE</div>
<div class="col order-sm-3">DESCRIPTION</div>
</div>
</div>
But who wants to work with heights in 2023? And don't forget:
Authors must not use order or the *-reverse values of
flex-flow/flex-direction as a substitute for correct source ordering,
as that can ruin the accessibility of the document.
Perhaps try and use grid to create your layout. No need for any ordering then:
/* Create two columns of equal size. */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
/* Let each grid-item by default span 2 columns... */
.grid-item {
grid-column: span 2;
}
#media (min-width: 576px) {
/* ...but only span 1 column above Bootstrap's SM breakpoint. */
.grid-item {
grid-column: span 1;
}
/* Let IMAGE start on row 1 and span 2 rows. */
.grid-item:nth-child(2) {
grid-row: 1 / span 2;
}
}
/* COLORS */
.grid-item:nth-child(1) {
background: lightgreen;
}
.grid-item:nth-child(2) {
background: lightyellow;
}
.grid-item:nth-child(3) {
background: lightblue;
}
<div class="grid">
<div class="grid-item">TITLE</div>
<div class="grid-item">IMAGE</div>
<div class="grid-item">DESCRIPTION</div>
</div>
It's also possible to use Grid in Bootstrap.
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'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%;
}
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I have the following code. Can someone please suggest the right way to give space between two column classes ?
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
.row {
clear: both;
}
.column {
width: 50%;
box-sizing:border-box;
padding: 10px;
float: left;
}
1 Using margin (Recommended way)
.column {
margin: 10px; /* or what ever */
}
2 Using Line Breaks (Not recommended)
Using this:
<div class="column"></div>
<br />
<div class="column"></div>
3 Padding (that you're using)
Padding would add a space inside the element. Which won't do the trick. You need to use margin instead of padding.
try
<div...></div> <div...></div>
if that does not work or has a compatibility issue
then try:
<div class="column" id="1"></div>
<div class="column" id="2"></div>
CSS:
div.column#1{position:fixed/relative/absolute;left: #px or #% ;top: #px or #%;}
note: ".column" is the class; the "#1" is the id; position should have only one of the listed values and there may be a few others; Left defines the # of px or % from the left of the document; and top defines the # of px or % from the Top of the document;
NOTE:I have only tested this method with Firefox. so other browsers may have other parameters.