Bootstrap 4.0 Grid System Layout not working - layout

I'm trying to do a layout with bootstrap, but I can't figure it out what I'm doing wrong. I'm putting two columns of 6 and the second column of 6 I'm putting 2 columns of 3 inside, but it's not working. I'm new to bootstrap.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-right: solid 1px #ffbfbf;border-left: solid 1px #ffbfbf;">a</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;"><div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
</div>
</div>
</div>
</div>
335
</body>
</html>
What I want to do :
What I get:


You're just missing a basic Bootstrap "rule". From the docs..
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
In Bootstrap 4, .col- that are not placed in .row will stack vertically.
https://www.codeply.com/go/GlA3IP7oGU
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
<div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
</div>
</div>
</div>
Read how Bootstrap nesting works
Related: Wrapping bootstrap columns in extra div

Related

Why flex-shrink doesn't work in inline-flex

Why items dont shrink in inline-flex. But it works fine in normal flex. Maybe it is supposed to work that way, I dont know. Maybe it is somewhere in the spec but I coudn't find anything related. I would be grateful if someone could explain this.
.container {
width: 100px;
margin 0 auto;
margin-top: 100px;
background-color: green;
}
.inline-flex {
display: inline-flex;
margin-bottom: 10px;
}
.flex {
display: flex;
}
.item {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: blue;
}
<div class="container">
<div class="inline-flex">
<div class="item">no-shrink</div>
<div class="item">no-shrink</div>
<div class="item">no-shrink</div>
</div>
<div class="flex">
<div class="item">shrink</div>
<div class="item">shrink</div>
<div class="item">shrink</div>
</div>
</div>

As stated before, flex acts like a block and inline-flex like inline-block on the outside and their children behave identically. The flex-items .item are acting totally different when they should appear the same because their behavior is influenced by the flex-container (.flex and .inline-flex). Aside from the flex-containers having different display values, there are no other differences.
Each .item of .inline-flex has retained it's width of 50px
Each .item of .flex has a width of 34.6687px
I still haven't figured out why this is but I have 3 different solutions:
.container is too small, increase it's width.
See Example A
Figure I
.container {
width: 200px;
/* Increase .container to at least the .offsetWidth of the 3 .item`s */
Change the flex properties of .items or assign min-width
See Example B
Figure II
.B .item {
flex: 0 0 50px;
/* OR */
/* min-width: 50px */
}
*,
::before,
::after {
box-sizing: border-box;
}
.container {
width: 100px;
background-color: green;
}
.A {
width: 200px;
}
.inline-flex {
display: inline-flex;
margin-bottom: 10px;
}
.flex {
display: flex;
}
.item {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: blue;
}
.B .item {
flex: 0 0 50px;
/* OR */
/* min-width: 50px */
}
h3 {
margin: 0 0 4px 0
}
<h3>OP</h3>
<div class="container">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
<h3>Example A</h3>
<div class="container A">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
<h3>Example B</h3>
<div class="container B">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>

Odoo QWeb - Flexbox not working when create pdf report

When this below code is used in HTML and opened using a browser, the flexbox effects are what I want. But when I use the same code in QWeb, the output is different (the flex div is not divided into two sections).
<div style="display: flex;">
<div style="border: 1px solid #ccc; flex: 1;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
<div style="border: 1px solid #ccc; flex: 1;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
</div>
Browser
PDF Report

The problem is not qweb but wkhtmltopdf. You can try webkit-box as mentioned in Using Flex/CSS with wkhtmltopdf
<div style="display: flex; display: -webkit-box; -webkit-box-pack: center; justify-content: center;">
<div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
<div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; margin-right: 0;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
</div>

How do I get this background image to show on Gmail? (<!--[if gte mso 9]>, not working)

<table class="row" align="center" cellpadding="0">
<tr>
<th class="column mobile-12" width="700" bgcolor="#525252" background="https://drive.google.com/uc?id=1P1-AAOYerLtuocs8vcawBpHbozaJ7CcE" style="font-weight: 400; background-repeat: no-repeat; background-position: center; background-size: cover;">
<!--[if gte mso 9]>
<v:image src="https://drive.google.com/uc?id=1P1-AAOYerLtuocs8vcawBpHbozaJ7CcE" style="width:700px;height:500px;" />
<v:rect fill="true" stroke="false" style="position:absolute;width:700px;height:500px;">
<v:fill opacity="0">
<div>
<![endif]-->
<div class="spacer" style="font-size: 134px; line-height: 134px; mso-line-height-rule: exactly;"> </div>
<center>
<a href="https://drive.google.com/uc?id=1x1mI8q21FyheNu1QfddhHyq9RgZm_zxY" target="_blank" class="hover-shrink" style="display: block; transition: all 0.3s ease-in-out 0s;">
<img src="https://drive.google.com/uc?id=12lnl9_m-_LLl8RreCHCn37p4_Ixa89Qp" width="66" alt="Play" style="border: 0; margin: 0 auto; width: 100%; max-width: 66px;">
</a>
</center>
<div class="h1" style="color: #FFFFFF; font-size: 60px; font-weight: 700; letter-spacing: 3px; line-height: 100%; margin: 30px 0 15px 0; text-align: center;">45bps</div>
<div style="color: #FFFFFF; font-size: 18px; line-height: 30px; text-align: center;">Grab attention with unique, bold <br> and elegant content.</div>
<div class="spacer" style="font-size: 135px; line-height: 135px; mso-line-height-rule: exactly;"> </div>
<!--[if gte mso 9]></div></v:fill></v:rect><![endif]-->
</th>
</tr>
</table>

Equal height children images in responsive Bootstrap 4 columns. How to?

Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>

I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u

body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}

div with masonry layout inside another masonry layout

My question is: i have a container with masonry layout, is possible that one or more item have inside another container with masonry?
<div class="masonry">
<div class="item"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside"></div>
<div class="item_inside"></div>
<div class="item_inside"></div>
</div>
</div>
<div class="item"></div>
</div>

You will have to init Masonry seperately on each grid container:
// Init masonry on outer container
$('.masonry').masonry({
itemSelector: '.item',
});
// Init masonry on inner container
$('.masonry_inside').masonry({
// You need to use another item selector class on the inner elements
itemSelector: '.item_inside',
});
.masonry {
width: 440px;
background-color: gray;
}
.item {
width: 200px;
background-color: black;
margin: 10px;
}
.item_inside {
width: 80px;
margin: 10px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item" style="height: 150px;"></div>
<div class="item" style="height: 200px;"></div>
<div class="item" style="height: 180px;"></div>
<div class="item">
<div class="masonry_inside">
<div class="item_inside" style="height: 180px;"></div>
<div class="item_inside" style="height: 80px;"></div>
<div class="item_inside" style="height: 120px;"></div>
<div class="item_inside" style="height: 35px;"></div>
</div>
</div>
<div class="item" style="height: 80px;"></div>
</div>

Resources