Bootstrap - aquire certain grid (column under column) - html

I'm trying to replicate a grid made in Excel using bootstrap grid system. What I managed to get so far is this:
.col-sm-5{
border:1px solid red;
height:20%;
}
.col-sm-2{
border:1px solid blue;
}
.col-sm-1{
border:1px solid grey;
}
.col-sm-4{
border:1px solid green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-5">Graph</div>
<div class="col-sm-2">Box1</div>
<div class="col-sm-2">Box2</div>
<div class="col-sm-2">Box3</div>
<div class="col-sm-1">Box4</div> <!-- will be empty -->
</div>
<div class="row">
<div class="col-sm-4">Graph Extra 1</div>
<div class="col-sm-4">Graph Extra 2</div>
<div class="col-sm-4">Graph Extra 3</div>
</div>
</div>
</body>
The layout I'm trying to replicate is this:
layout
So basically , I tried using <div class="w-100"></div> but from the results I've seen, it's probably not what I'm looking for as it moves everything on a new line.
So I would like to add another column under Box 1 , another 2 under Box 2 and then for the box 3 I guess I would increase the height to match the other columns.
I'm trying to find the best way , the responsive way to accomplish this.
Also , does anyone know how could I accomplish a replica of this excel chart? Would chart.js work along with angularjs for the data feed?
Thank you!


Something like this?
[class^='col-sm'] {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-5">
BOX GRAPH
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
BOX 1
</div>
<div class="col-sm-12">
BOX 2
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
BOX 1
</div>
<div class="col-sm-12">
BOX 2
</div>
<div class="col-sm-12">
BOX 3
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1">
LIKE BOX
</div>
<!-- will be empty -->
</div>
<div class="row">
<div class="col-sm-4">Graph Extra 1</div>
<div class="col-sm-4">Graph Extra 2</div>
<div class="col-sm-4">Graph Extra 3</div>
</div>
</div>
</body>


To subdivide containers you can insert a row again followed by col-12 for a full column:
.col-sm-5{
border:1px solid red;
height:120px;
}
.col-sm-2{
border:1px solid blue;
}
.col-sm-1{
border:1px solid grey;
}
.col-sm-4{
border:1px solid green;
}
.col-12{
border:1px solid orange;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-5">Graph</div>
<div class="col-sm-2">Box1</div>
<div class="col-sm-2">
<div class="row">
<div class="col-12">
Box2 (A)
</div>
</div>
<div class="row">
<div class="col-12">
Box2 (B)
</div>
</div>
</div>
<div class="col-sm-2">Box3</div>
<div class="col-sm-1">Box4</div> <!-- will be empty -->
</div>
<div class="row">
<div class="col-sm-4">Graph Extra 1</div>
<div class="col-sm-4">Graph Extra 2</div>
<div class="col-sm-4">Graph Extra 3</div>
</div>
</div>
</body>

Related

"col-xxl" is adding a padding in fluid-container bootstrap

i've been experimenting with the bootstrap grid system, than i encountred this issue with the "col-xxl" class, can you advise on why this happened and how to overcome this?
<style>
[class*="col"] {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
}
</style>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="container-fluid text-center ">
<div class="row">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div><div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
the code i worked on

You had an additional row class wrapped around your div(s). Additionally, you forgot to wrap a row class around your col-xl. See code snippet below:
[class*="col"] {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid text-center ">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="row">
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div>
<div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>

You have placed class row 2 times which at col-xxl and the same is missing above col-xl..
please refer snippet and code for your reference..
also I've attached snap for details..
[class*="col"] { padding: 1rem; background-color: #33b5e5; border: 2px solid #fff; color: #fff; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="alert alert-primary text-center" role="alert">
A simple primary alert—check it out!
</div>
<div class="container-fluid text-center ">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="row">
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div>
<div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
Thanks..

bootstrap 5 columns in one row

Five equal columns in twitter bootstrap
Bootstrap - 5 column layout
5 columns per row in Bootstrap-4
I have already looked at these links but still not found an issue
I have tried to get 5 columns in a row with below
css
.col-xs-offset-13{
margin-left:4.166666667%;
}
html
<div class="col-xs-2">1</div>
<div class="col-xs-2 col-xs-offset-13">2</div>
<div class="col-xs-2 col-xs-offset-13">3</div>
<div class="col-xs-2 col-xs-offset-13">4</div>
<div class="col-xs-2 col-xs-offset-13">5</div>
but the result I get is 6 columns in a row. any ideas would be appreciated

you can use a col-xx class without a column size :
div div div {
border: solid;
margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
<div class="row">
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
</div>
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>

Include in your CSS style:
.custom-col{
width: 20%;
word-break:break-all;
}
HTML:
<div class="row">
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
</div>
It worked for me!

How to restrict a div stay at the bottom of another 2 div

I got 3 div with 33% width.
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
How can I restrict the 3rd div not to align with the other 2 divs, I want the first 2 div in a row and the 3rd div bottom side using CSS properties??

If you just want the third div to appear on the next line, or "bottom side", then just give it block level display, like so:
.col-md-4 {
display:inline-block;
width:33%;
height:100px;
background-color:red;
}
.block {
display:block;
}
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4 block">3</div>
</div>
If this is not what you want then please elaborate on your question.

This is my simple solution. I use CSS Grid in the following code.
HTML code:
<div class="row">
<div class="col-md-4">Text One</div>
<div class="col-md-4">Text Two</div>
<div class="col-md-4">Text Three</div>
</div>
CSS code:
.row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.row div:last-child {
grid-column: 1/3;
}

your code:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
solution:
<div class="row">
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4">a</div>
</div>

You can try this at your css
.col-md-4{
width:33.33%;
display:inline-block;
}
.col-md-4:nth-of-type(3){
display:block;
}

Your code:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
Solution:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-5">a</div>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-6 text-center"> Col-4 </div>
<div class="col-6 text-center"> Col-4 </div>
<div class="col-12 text-center"> Col-12 </div>
</div>

<div class="row">
<div style="display:inline-block;" class="col-md-4">a</div>
<div style="display:inline-block;" class="col-md-4">a</div>
<div style="display:block;" class="col-md-4">a</div>
</div>
Set style of first 2 divs to display:inline-block; and 3rd one to display:block;
Working JSFiddle example

Try this out.
<style>
.col-md-4{
width: 100px;
height: 100px;
background-color: burlywood;
border : 1px solid black;
}
</style>
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>

Since you are using bootstrap, it's easy to achieve this as all you need to do is it exceed the 12 cols for a row concept.
Just add col-md-12 to your last div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-4">a1</div>
<div class="col-4">a2</div>
<div class="col-12">a3</div>
</div>

Is there way to have bootstrap one column height equal to two columns vertically?

I want to create a layout with bootstrap where I need one column to be equal to two columns vertically. I think it would be better understood if you take a look at visual representation.
Also, I want it to be responsive to the next column would wrap below this layout on smaller devices.

You have to structure your HTML accordingly.
Try this code snippet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col" style="border:1px solid #ccc">Left Column</div>
<div class="col">
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 1</div>
</div>
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 2</div>
</div>
</div>
</div>

Try below:
CSS:
<style>
div{
border:1px solid black;
}
.row, .container{
border: none;
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">2</div>
<div class="col-sm-6">3</div>
</div>
<div class="row">
<div class="col-sm-6">4</div>
<div class="col-sm-6">5</div>
</div>
</div>
</div>
</div>

Making table with div base structure for my responsive project

In my new project I'm using bootstrap and css both and I'm making responsive table using div base structure. I am trying this example for making table but my page is like below image:
I am trying to put below image structure:
Problem is in only 1x3 tuple.
`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="table" style="border:1px solid black;">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
`

Using your code I'm correct your code. Change first col-md-6 to col-md-4 and then change second col-md-6 to col-md-8. If after this you do not understand then go with my code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
div{
border: 1px solid black;
}
</style>
<div class=" table table-bordered" >
<div class="row " >
<div class="col-md-4">
1
</div>
<div class="col-md-8">
2
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
</div>
see my code snippet in full screen of your device.

If I'm understanding your question, the top values should col-md-4 and col-md-8, not 6 and 6:
<div class=" table " style="border:1px solid black;">
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-8">
2
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
</div>

Try the following
<div class=" table " style="border:1px solid black;">
<div class="row ">
<div style="width:35%;float:left;border:1px solid black;">
1
</div>
<div style="width:65%;float:left;border:1px solid black;">
2
</div>
</div>
<div class="row ">
<div style="width:35%;float:left;border:1px solid black;">
1
</div>
<div style="width:30%;float:left;border:1px solid black;">
2
</div>
<div style="width:35%;float:left;border:1px solid black;">
3
</div>
</div>
<div class="row ">
<div style="width:35%;float:left;border:1px solid black;">
1
</div>
<div style="width:30%;float:left;border:1px solid black;">
2
</div>
<div style="width:35%;float:left;border:1px solid black;">
3
</div>
</div>
</div>