I'm interested in creating a dashboard using the Bootstrap grid system. I'd like the layout to look as follows:
What is the best way to structure this in the HTML file? Should it be 5 rows and 2 columns?
Here is my attempt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 d-flex justify-content-center">
<img src="foo.png" alt="Box 1">
</div>
<div class="col-9">
Box 2
</div>
</div>
<div class="row">
<div class="col-2">
Box 3
</div>
<div class="col-2">
Box 3
</div>
</div>
<div class="row">
<div class="col-4">
<div>
<table>
Box 4
</table>
</div>
<div>
<table>
Box 5
</table>
</div>
</div>
<div class="col-8">
Box 6
</div>
</div>
<div class = "row">
<div class="col-12 d-flex justify-content-center">
Box 7
</div>
</div>
</div>
</body>
</html>
Any assistance would be most appreciated!
Thanks!
4 rows, two inner rows on row 3 for the left box 4 and box 5.
And then you specify the css inside each box, like alignment and height etc. But the 2 columns in row 3 containing box 4, 5 and 6 are on the same row, for the gap in between, just specify blank columns but make sure they always add up to 12.
.box {
border-style: dotted;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<!--Row 1-->
<div class="row">
<div class="col-3">
<div class="box">
Box 1 (Image)
</div>
</div>
<div class="col-1">
</div>
<div class="col-8">
<div class="box">
Box 2 （Text)
</div>
</div>
</div>
<!--Row 2-->
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
<div class="box">
Box 3
</div>
</div>
<div class="col-4">
</div>
</div>
<!--Row 3-->
<div class="row">
<div class="col-4">
<!--Row 3.1-->
<div class="row">
<div class="col-12">
<div class="box">
Box 4 (Table)
</div>
</div>
</div>
<!--Row 3.2-->
<div class="row">
<div class="col-12">
<div class="box">
Box 5 (Table)
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-7">
<div class="box">
Box 6 (Chart)
</div>
</div>
</div>
<!--Row 4-->
<div class = "row">
<div class="col-12">
<div class="box">
Box 7 (Table)
</div>
</div>
</div>
</div>
</body>
</html>
Related
I used the bootstrap grid and it doesn't seem to be styling the html code using css. I put down the code below and this is my result. column column cloumn
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_module/bootstrap/dist/js/boostrap.bundle.js"></script>
<div class="container-md border">
<div class="container-md">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
</div>
Here's a version with remote CDNs:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="container-md border">
<div class="container-md">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
</div>
I am rendering a html website with ruby (html.erb). Depending on what values the database has, it either renders <p>somevalue</p> or if the given attribute has no value, it only renders <p></p> inside a column of a row (Bootsrap). If the rendered html is <p></p> the row has smaller height. Have a look at the code below on full page. In Example 1 the second column of the first row has <p></p> and it looses half of its row-height. In Example 2 the has some value, and the row keeps its height. I want to have a solution where the rows are keeping their height, no matter if the renders html is <p></p> or <p>somevalue</p>
<!-- JavaScript Bundle with Popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="h3">
Example 1
</div>
<div class="container">
<div class="row">
<div class="col-md-2">
<strong>Row 1</strong>
</div>
<div class="col-md-10">
<p></p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<strong>Row 2</strong>
</div>
<div class="col-md-10">
<p>41</p>
</div>
</div>
</div>
<div class="h3">
Example 2
</div>
<div class="container">
<div class="row">
<div class="col-md-2">
<strong>Row 1</strong>
</div>
<div class="col-md-10">
<p>42</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<strong>Row 2</strong>
</div>
<div class="col-md-10">
<p>41</p>
</div>
</div>
</div>
The heights are not equal because of the default margin of <p>. If you remove it, in both scenario it will be of same height. If you want spacing between rows, you could add margin to the row using bootstrap utility class like .mb-2.
.row p {
margin-bottom: 0;
}
.row {
border: 1px solid #ccc;
}
<!-- JavaScript Bundle with Popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="h3">
Example 1
</div>
<div class="container">
<div class="row mb-2">
<div class="col-md-2">
<strong>Row 1</strong>
</div>
<div class="col-md-10">
<p></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2">
<strong>Row 2</strong>
</div>
<div class="col-md-10">
<p>41</p>
</div>
</div>
</div>
<div class="h3">
Example 2
</div>
<div class="container">
<div class="row mb-2">
<div class="col-md-2">
<strong>Row 1</strong>
</div>
<div class="col-md-10">
<p>42</p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2">
<strong>Row 2</strong>
</div>
<div class="col-md-10">
<p>41</p>
</div>
</div>
</div>
I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.
<div class="container-fluid">
<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>
I am trying to have responsive (allow grow) columns but all columns should carry same width.
You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<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" id="last-column">
</div>
</div>
</div>
You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<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 class="col-md-4">
4
</div>
<div class="col-md-4">
5
</div>
<div class="col-md-4 d-none d-lg-block">
6
</div>
</div>
</div>
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 main-container">
<h1>Welcome</h1>
<hr>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2">
<img class="pull-left" src="http://placehold.it/32x32"/>
</div>
<div class="col-sm-4">
<h3>Capture Everything.</h3>
<p>Save all your data, data are significant and crucial.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">2</div>
<div class="col-sm-4">2</div>
</div>
<div class="row">
<div class="col-sm-2">3</div>
<div class="col-sm-4">3</div>
</div>
</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</body>
</html>
Below is the working link:
http://jsbin.com/kojorike/1/edit
How can i create a something like below with image in left column and text in right column?
http://postimg.org/image/x24ukc74j/
In bootstrap each class="row" consists out of 12 colums.
meaning you have to use them.
example:
<div class="row">
<p class="col-md-8">text text text</p>
<img src="/image.jpg" class="col-md-4" />
</div>
Note. you can use class="col-md-offset-5" to add a spacing between the previous element.