Issue with bootstrap columns while nesting inside columns - html

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>

Related

Bootstrap Nested Column Checkbox Padding

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>

Responsive list of divs in bootstraps

I have created this table with divs. This is how it is displayed on the screen:
<div class="row my-2">
<div class="col-lg-2">
<strong>Source</strong>
</div>
<div class="col-lg-2">
<strong>Target Language</strong>
</div>
<div class="col-lg-2">
<strong> Price per word</strong>
</div>
<div class="col-lg-2">
<strong>Total words</strong>
</div>
<div class="col-lg-2">
<strong>Total per language</strong>
</div>
<div class="col-lg-2">
<strong>Total Price</strong>
</div>
</div>
And this for entries in tables:
<div class="row my-2">
<div class="col-lg-2 mx-auto my-auto">
script.txt (English)
</div>
<div class="col-lg-2 mx-auto">
<div class="row mx-auto">
German
</div>
<div class="row mx-auto">
Chineese
</div>
<div class="row mx-auto">
French
</div>
</div>
<div class="col-lg-2">
<div class="row mx-auto">
$0.04
</div>
<div class="row mx-auto">
$0.05
</div>
<div class="row mx-auto">
$0.04
</div>
</div>
<div class="col-lg-2 mx-auto my-auto">
× 1245
</div>
</div>
I am getting this on large screen, but not on mobile view.
What can be done to get this same table on mobile view.

Need help creating a reponsive template

I am trying to make a responsive grid but I was very unsuccessful.
I am new to bootstrap and I am not very good in Front-end.
I tried some codes but this one is the closest one to my needs.
<div><p>MY TEXT HERE -------------------------</p></div>
<div>
<div id="containerTest" class="container-fluid" style="margin-left: 0px;">
<div class="row">
<div class="col-sm-3" style="background-color:red;" >AAAA</div>
<div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
<div class="col-sm-3" style="background-color:lavender;">
<button class="button button2">OK</button></div>
</div>
</div>

With this Bootstrap 4 code, the layout looks like your drawing.
<div class="container">
<div class="row">
<div class="col-12">
<p>My text here</p>
</div>
</div>
<div class="row">
<div class="col-3 col-md-2 pt-2 pr-0">
<label>Input label</label>
</div>
<div class="col-6 col-md-2 pr-0">
<input type="text" class="form-control w-100">
</div>
<div class="col-3 d-md-none">
<button type="button" class="btn btn-success">Save</button>
</div>
<div class="col-12 col-md-3">
<input type="text" class="form-control w-100">
</div>
<div class="col-12 col-md-3 d-none d-md-flex pl-0">
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Other elements here</p>
</div>
</div>
</div>

That should do it.
<div class="container">
<div class="row">
<div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4">Input Label</div>
<div class="col-md-3 col-sm-4">Input</div>
<div class="col-md-3 hidden-sm">Input</div>
<div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
<div class="col-sm-12">
<div class="col-md-3">Input</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Text Area here</div>
</div>
</div>

Fixed bottom not working with parent having overflow

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;
}

bootstrap 4 cards content overflow

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