I have two nested columns in one row, one set of columns height is greater than the other. It seems that bootstrap is adding some additional padding/margin to the checkboxes that I am unable to figure out (see image below). If I remove checkboxes for text, the layout is fine.
Is there a way to make the second nested columns have the same height (Right bordered item in picture)?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container mt-3">
<div class="row">
<div class="col-2">
<div class="row">
<div class="col-4 d-flex justify-content-center">
<span class="">1</span>
</div>
<div class="col-4 d-flex justify-content-center">
<span class="">2</span>
</div>
<div class="col-4 d-flex justify-content-center">
<span class="">3</span>
</div>
</div>
</div>
<div class="col-10">
<div class="row">
<div class="col-2 d-flex">
<span>Service List</span>
</div>
<div class="col-8 text-center">
<span>Description</span>
</div>
<div class="col-1 px-1 text-start">
<span >Amount</span>
</div>
<div class="col-1">
<span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="row align-items-center">
<div class="col-4 d-flex justify-content-center align-items-center ">
<div class="form-check align-items-center d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked>
</div>
</div>
<div class="col-4 d-flex justify-content-center">
<div class="form-check d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked>
</div>
</div>
<div class="col-4 d-flex justify-content-center border">
<div class="form-check d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked>
</div>
</div>
</div>
</div>
<div class="col-10">
<div class="row align-items-center">
<div class="col-2 border">
<span>Line Item Name</span>
</div>
<div class="col-8">
<span>Line Item Description</span>
</div>
<div class="col-1">
<span>Total</span>
</div>
<div class="col-1">
<div class="form-check d-flex justify-content-center">
<input class="form-check-input align-self-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" >
</div>
</div>
</div>
</div>
</div>
Related
The layout of page is miss-placed when columns are nested inside another column
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-6"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-6"></div>
</div>
</div>
An advanced way:
<div class="container bg-primary" style="width: 800px; height: 100px; ">
<div class="row ml-1 h-100">
<div class="col-10 ml-0 my-auto h-75 container bg-danger">
<div class="row ml-1 h-100">
<div class="col-8 ml-0 my-auto h-75 container bg-warning">
<div class="row ml-1 h-100">
<div class="col-6 ml-0 my-auto h-75 container bg-success">
<div class="row ml-1 h-100">
<div class="col-4 ml-0 my-auto h-75 container bg-dark">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm wanting to have a sticky footer nav type of thing on the bottom of my first col-6 (within, not outside) the div. Problem is, it has overflow which seems to be preventing me from getting it to work. Closest I got to was it starting in the correct position, then it scrolled due to the overflow. I'm scratching my head a bit here.
PS- Sorry there's a lot of code, I added a lot of placeholders to force the overflow so it's more authentic.
.b-wrapper {
border-radius: 4px;
width: 90vw;
height: 90vh;
max-width: 1024px;
max-height: 768px;
}
.booking-item {
padding: 30px 15px 30px 15px;
cursor: pointer;
border-bottom: 2px solid #f5f5f5;
min-height: 30px;
}
.tts {
max-height: 650px;
overflow-y: auto;
}
.book_apt {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container" style="height:100vh;">
<div class="row justify-content-center h-100">
<div class="col-12 my-auto mx-auto">
<div class="card">
<div class="card-body p-0">
<div class="row">
<div class="col-6 pr-0 tts">
<div class="book_apt">
<a class="btn btn-primary" href="#">Book Service</a>
</div>
<!-- Added a lot to force the overflow -->
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
Massage Therapy (60 minutes)
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>
Change position: fixed; to position: sticky; and move book_apt to the bottom of your col-6.
This should do the trick.
.b-wrapper {
border-radius: 4px;
width: 90vw;
height: 90vh;
max-width: 1024px;
max-height: 768px;
}
.booking-item {
padding: 30px 15px 30px 15px;
cursor: pointer;
border-bottom: 2px solid #f5f5f5;
min-height: 30px;
}
.tts {
max-height: 650px;
overflow-y: auto;
}
.book_apt {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container" style="height:100vh;">
<div class="row justify-content-center h-100">
<div class="col-12 my-auto mx-auto">
<div class="card">
<div class="card-body p-0">
<div class="row">
<div class="col-6 pr-0 tts">
<!-- Added a lot to force the overflow -->
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="book_apt">
<a class="btn btn-primary" href="#">Book Service</a>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
.book_apt {
background-color: #ddd;
position: fixed;
padding: 2em;
left: 50%;
bottom: 8%;
transform: translateX(-50%);
width: 58%;
z-index: 1000;
}
I'm trying to create an image grid with that little space between columns equal to the image below:
The problem is that I can not make the right margin(red line), image below shows the problem:
JSfiddle: https://jsfiddle.net/castordida/0zy7qd5m/
<div class="container gridhome mt-5 mb-5 p-0">
<div class="row" style="height:469px;">
<div class="col-sm-8 h-100" style="background-color:#000;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1 mt-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
<div class="row mt-1" style="height:234.5px;">
<div class="col-sm-4 h-100 p-0">
<div class="h-100" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
Ok it's due to the fact there is a gab between your picture at right... But the fixed height doesn't mention it...
There are many ways to correct this...
First : https://jsfiddle.net/y0x7kpza/
Add an overflow:hidden to the first .row
Second: https://jsfiddle.net/d0a52xwk/
Reaffect the height of the two div on the right in taking care of the margin-top of these elements.
.h-50-bis{
height:calc(50% - 0.125rem);
}
Can anyone help me figure out what's wrong with my layout? I am adding some controls to a card and the content overflows. I want the card to be as wide as the widest row...
<div class="container">
<div class="row">
<div class="col-auto p-4 ">
<div class="card">
<div class="card-header"><h4>Find a contact</h4></div>
<div class="card-body">
<div class="row flex-nowrap">
<div class="col-4 p-1 text-right">First:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Last:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Compnay:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox[enter link description here][1]"></div>
</div>
</div>
<div class="card-footer">
<div class="row ">
<div class="col">more search</div>
</div>
</div>
</div>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/msz2ndkr/21/
The problem with your html is the following line:
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Bootstrap assumes 12 columns and you have specified 8 columns (col-8). All your other rows have 12. Also, get rid of the offset-4. Here is my solution:
<div class="row p-1">
<div class="col-12 p-1 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Here is a fiddle
There seems to be a problem with how 'width: auto' is calculated and set on certain elements and their parents. Try making your nowrap container a flexbox and set some width for it's children like:
`
.nowrap-elems-container {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
}
`
https://jsfiddle.net/a0godL7b/25/
it's not too elegant but it should work
I'm using Bootstrap 4 to style a form in HTML+CSS.
I have six checkboxes with label that on certain media sizes should be display as two rows of three columns. Checkboxes on each column should be aligned. Also, the longest text on any row from the right column, should be right-aligned with the rest of the form. So far, I can only manage one of those things. So, how do I go from this:
Or this:
To this (image edited):
Below is the HTML code I'm using for the first example, with the checkboxes aligned (it's embedded within other divs but they should not have any role in this issue).
FYI, I'm adding a bit of styling with the following custom styles (included in survey01.css):
.form-inline>div>label {
white-space: nowrap;
}
#media (max-width: 767px) {
#nature-label {
margin-bottom: 0;
}
}
#media (max-width: 1199px) {
#nature-label {
margin-bottom: 0;
}
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- IE displays content in highest supported mode -->
<title>Do you know what proteins are?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- width as in viewport; zoom=100% -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="survey01.css" />
<!-- optimize for screens -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 id="title" class="display-4 text-center">Test title</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="description" class="text-center">Test subtitle.</p>
</div>
</div>
<div class="jumbotron">
<form id="survey-form">
<div class="form-group row m-0">
<div class="container-fluid p-0">
<div class="form-row">
<div class="form-group form-group-md col-md-5 col-lg-6 mb-2">
<!-- #media modifies mb-2 -->
<div class="row m-0">
<label for="nature" id="nature-label" class="pr-2 pl-0">Do you think proteins are a natural or synthetic product?</label>
</div>
</div>
<div class="form-inline justify-content-between align-items-start col-md-7 col-lg-6 mb-3">
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature1">
<input type="radio" id="nature1" name="nature" value="natural" class="mr-1">Natural
</label>
</div>
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature2">
<input type="radio" id="nature2" name="nature" value="synthetic" class="mr-1">Synthetic
</label>
</div>
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature3">
<input type="radio" id="nature3" name="nature" value="both" class="mr-1">Both
</label>
</div>
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature4">
<input type="radio" id="nature4" name="nature" value="dontknow" class="mr-1">Don't know
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row m-0">
<div class="container-fluid p-0">
<div class="form-row">
<div class="form-group form-group-md col-md-4 col-lg-6 col-xl-4 mb-2">
<!-- #media modifies mb-2 -->
<div class="row m-0">
<label for="identify" id="identify-label" class="pr-2 pl-0">Which of the following qualify as 'proteins'?</label>
</div>
</div>
<div class="form-inline justify-content-between align-items-start col-md-8 col-lg-6 col-xl-8 mb-3">
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify1">
<input type="checkbox" id="identify1" name="identify" value="meat" class="mr-1">Meat
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify2">
<input type="checkbox" id="identify2" name="identify" value="arginine" class="mr-1">Arginine
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify3">
<input type="checkbox" id="identify3" name="identify" value="haemoglobin" class="mr-1">Hæmoglobin
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify4">
<input type="checkbox" id="identify4" name="identify" value="bar" class="mr-1">Protein bar
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify5">
<input type="checkbox" id="identify5" name="identify" value="egg" class="mr-1">Egg
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-end col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify6">
<input type="checkbox" id="identify6" name="identify" value="albumin" class="mr-1">Albumin
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</body>