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>
Related
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 do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
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
I want to achieve something like this
So, in the image , A is occupying two rows and B is occupying two columns
I tried, something like this, but as you can see, the logo is never
two column wide, because it is inside a nested row, so it never looks aligned , it always looks shorter or larger
.row{
border:1px solid red;
}
.row div{
min-height: 100px;
border:1px solid black;
}
<div class="container-fluid">
<div class="row upper-row">
<div class="col-md-7" id="">
<div class="row">
<div class="col-md-12">
x
</div>
</div>
<div class="row">
<div class="col-md-8">
s
</div>
<div class="col-md-4">
LOGO
</div>
</div>
</div>
<div class="col-md-5" id="">
A
</div>
</div>
<div class="row bottom-row">
<div class="col-md-5" id="">
</div>
<div class="col-md-7" id="">
B
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
A
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
B
</div>
</div>
I am trying to make kind of table which has a header row then details row below it and then another header row below that and so on. It looks like this:
But I also need to borders between each cell.
Here is a jsFiddle for it: http://jsfiddle.net/MyeXa/2/
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Pens</h1>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
Created On
</div>
<div class="col-md-6">
Last Updated On
</div>
</div>
<div class="row">
<div class="col-md-6">
30/01/2013
</div>
<div class="col-md-6">
04/02/2013
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-4">
Item Number
</div>
<div class="col-md-4">
Item Name
</div>
<div class="col-md-4">
Item Description
</div>
</div>
<div class="row">
<div class="col-md-4">
5555
</div>
<div class="col-md-4">
Pen
</div>
<div class="col-md-4">
Nice pen
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
Status
</div>
<div class="col-md-6">
Repair Status
</div>
</div>
<div class="row">
<div class="col-md-6">
Good
</div>
<div class="col-md-6">
Fixed
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-12">
Assigned Shop
</div>
</div>
<div class="row">
<div class="col-md-12">
Shop 1
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
LT
</div>
<div class="col-md-6">
LT Pending
</div>
</div>
<div class="row">
<div class="col-md-6">
N/A
</div>
<div class="col-md-6">
416 Days and 33 Minutes
</div>
</div>
</div>
</div>
</div>
Now the problem came when I tried to add borders to separate each cell, the line is cut in the middle (see the fiddle output). I am not sure if I should change the layout or if I need to do something else with the CSS
Set margin-bottom:0 on the H4..
.row .h4 {
border-top: 1px solid #DADADA !important;
padding-top: 10px;
margin-bottom:0;
}
http://jsfiddle.net/MyeXa/4/
If you want to remove all of the gaps you also need to remove the top margin, and adding padding to the cols..
http://jsfiddle.net/MyeXa/5/
<table>
<tr><th>column 1</th><th>column two</th><th>and column 3</th></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><th>new column 1</th><th>column two</th><th>and column 3</th></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
</table>
This works, now you can style it to your hearts content!