How do you use the Bootstrap Grid? - html

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>

Related

How to structure the layout of a dashboard using Bootstrap?

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>

Bootsrap rows has smaller height of last column has an empty <p></p>

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>

How to merge 2 rows and 2 columns to become 1 big box in Bootstrap 4?

How to merge 2 rows and 2 columns to become 1 big box in Bootstrap 4?
Before:
To be like this:
HTML
<div class="container">
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
</div>

I have made some changes to your html structure, also used some b-4 classes (h-100) to align it. read boostrap-4 document to understand grid system.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
<div class="w-100"></div>
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
</div>
</div>
<div class="col">
<div class="row h-100">
<div class="col border h-100">.col-3</div>
</div>
</div>
</div>
</div>

Hope this helps. Note i did not add background colors or classes to keep the answer clean
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">A</div>
<div class="col-sm-6">B</div>
</div>
<div class="row">
<div class="col-sm-6">C</div>
<div class="col-sm-6">D</div>
</div>
</div>
<div class="col-sm-6">
F
</div>
</div>
JSFIDDLE LINK

How to create Bootstrap columns all with same width?

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>

Bootstrap 4 row & column stacking vertically instead of horizontally

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>