I am searching to split the screen into 3 sections
On a wide screen:
On small screen:
Any ideas to how to achieves this?
I guess there is a combination of flexbox and the grid system but i am not able to figure it out.
Edit: I just did a tentative using just the row and col but i am not sure that is the ideal solution
#left {
height: 600px;
}
#righttop {
height: 300px;
}
#rightbottom {
height: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success" id="left">
left part
</div>
<div class="col-md-6">
<div class="row bg-primary" id="righttop">first part right</div>
<div class="row bg-warning" id="rightbottom">first part left</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
Three Image Combinations,
html,
body {
height: 100%;
width: 100%;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-family: sans-serif;
}
.img_container {
width: 70vw;
height: 80vh;
margin: 20px auto;
display: flex;
}
.main-img {
width: 50%;
height: 100%;
margin-right: 10px;
background-color: orange;
}
#media (max-width: 991px) {
.main-img {
width: 100%;
height: 100%;
}
}
.stacked-div {
width: 50%;
height: 100%;
}
#media (max-width: 991px) {
.stacked-div {
width: 100%;
height: 100%;
}
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
opacity: 0;
transition: all .4s;
display: flex;
justify-content: center;
align-items: center;
}
.main-img:hover .overlay,
.top-img:hover .overlay,
.bottom-img:hover .overlay {
opacity: 1;
}
.top-img,
.bottom-img {
width: 100%;
height: calc(50% - 5px);
background-color: orangered;
}
.top-img {
margin-bottom: 10px;
}
<div class="img_container">
<!-- top level image container START-->
<div class="main-img">
<!--Main image -->
<div class="overlay">
<!--overlay div -->
<h1>Hello!</h1>
</div>
</div>
<div class="stacked-div">
<!--stacked img container -->
<div class="top-img">
<!--top image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
<div class="bottom-img">
<!--bottom image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
</div>
The Bootstrap 4 way would be to use the flexbox utility classes...
<div class="container">
<div class="row">
<div class="col-md-6 bg-success min-vh-100" id="left">
left part
</div>
<div class="col-md-6 d-flex flex-column">
<div class="row flex-grow-1">
<div class="col-md-12 bg-primary min-vh-100 min-vh-md-50" id="righttop">first part right</div>
<div class="col-md-12 bg-warning min-vh-100 min-vh-md-50" id="rightbottom">first part left</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/vbWvESRSXP
Then you just need a little additional CSS to make the right columns 1/2 height on md and wider..
#media (min-width: 768px) {
.min-vh-md-50 {
min-height: 50% !important;
}
}
You’re right, you have to use Grid System with breakpoints, rows and cols, read the official documentation.
If you still looking for an answer, see this.
<div class="row">
<div class="col-md">First col md</div>
<div class="col-md">
<div class="row">
<div class="col-12">Second col xs</div>
<div class="col-12">Third col xs</div>
</div>
</div>
Follow this link.
Related
I'm trying to build a regular calculator but the layout doesn't behave. The "div.row div" css selector is being overlapped by its containing content to the right side. I tried checking chrome dev tools, but margin, padding and border are set to 0, so it doesn't give me a reason why it's happening.
Any help will be greatly appreciated!
body {
font-family: sans-serif;
width: 40%;
height: 1000px;
max-width: 1000px;
min-width: 250px;
margin: 0 auto;
}
main {
padding: 3%;
background-color: #753471;
}
div.row div {
display: inline-block;
width: 16.25%;
height: 30px;
padding: 2%;
background-color: #f2d8f0;
text-align: center;
margin: 0.3%;
font-size: 85%;
}
div.row {
display: inline-block;
width: 100%;
margin: 0%;
padding: 0;
}
div#output {
display: block;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Calculator</title>
</head>
<body>
<header></header>
<main>
<!-- output -->
<div id="output"></div>
<div class="row">
<div id="clear">C</div>
<div id="mudulu">%</div>
<div id="division">÷</div>
<div id="times">x</div>
</div>
<div class="row">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="minus">-</div>
</div>
<div class="row">
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="plus">+</div>
</div>
<div class="row">
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="equals">=</div>
</div>
<div class="row">
<div id="decimal">.</div>
<div id="zero">0</div>
<div id="delete">backspace</div>
</div>
</main>
</body>
</html>
Im playing around with bootstrap and i've come up against something I am struggling to find an answer to.
I want to put a 'Login' on the bottom right of the screen, near the fold. Below is my code:
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
}
.home-btn {
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-50%);
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Currently the button sits centred on the right box, which is my second option. My first would be to have it sit within the right panel, near the bottom right. If I move the button outiside of the right div, i can make the button go down to the right, but it adds a row that breaks the effect.
any help would be appreciated.
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
position: relative;
}
.home-btn {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css">
<script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"></script>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=" top-back">
<img src="images/Untitled-2.png" alt="">
</div>
<div class=" main-back" >
<div class="container">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12 ">
<div class="blue">
<img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;">
<ul>
<li style="left: 25%; top: 5px" class="pics1"><img src="images/face1.png" alt="" >Facelift surgery</li>
<li style="left: 25%; top: 200px" class="pics2"><img src="images/face2.png" alt="">Lip Augmentation</li>
<li style="left: 25%; top: 390px" class="pics3"><img src="images/face3.png" alt="">Botox Injections</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row white-box">
<div class="col-5">
<div class="">
<h1>Facelift Surgery</h1>
<p>Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.
</p>
<button>Make an appointment</button>
</div>
</div>
<div class="col-7 face">
<img src="images/face.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-back">
<img src="images/Untitled-3.png" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
/* CSS Document */
body{
margin: 0
}
.top-back img{
width: 100%;
padding: 0 !important;
position: relative;
top: 10px
}
.main-back{
background-color: #f3e5d8;
height: 600px
}
.bottom-back img{
position: relative;
top: -10px;
width: 100%
}
.white-box{
background-color: #fff9f3;
border-radius: 30px;
position: relative;
top: 108px;
height: 450px
}
.face img{
width: 94.5%;;
position: absolute;
top: -124px;
right: 23px;
}
.blue{
background-color:#2d3663;
border-radius: 30px;
position: relative;
top: -4px;
width: 78%
}
.blue ul{
text-align: center;
text-decoration: none;
cursor: pointer;
color: white;
list-style-type: none;
padding: 0;
height: 596px
}
.blue li{
padding: 15px 0;
position: absolute
}
.blue img{
display: block;
margin: auto;
width: 90%;
margin-bottom: 10px
}
.white-box h1 {
color: #cd8274;
margin-top: 40px
}
.white-box p{
color: #474e75;
margin: 40px 0;
line-height: 29px;
font-size: 20px;
}
$(document).ready(function(){
$('.pics2').hover(function(){
$('.magic').animate({top: "195px"});
});
$('.pics1').hover(function(){
$('.magic').animate({top: "0"});
});
$('.pics3').hover(function(){
$('.magic').animate({top: "384px"});
})
});// JavaScript Document`
i finally found the reason... the CDN of jquery must not be the first one. i changed the position of that and it worked
Console shows me $(...).animate is not a function
This is the reason
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Remove it and everything will work. This version of jQuery jquery-3.3.1.slim.min.js is shorter (slim) and doesn't support animate function.
Use the full one instead.
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
I got my bootstrap grid to work. But I'm having trouble trying to figure out how to get it to collapse at 750px.
This is what it's suppose to look like this when larger than 750px:
Full-Size
and this is what it's suppose to look like when between 550px-750px:
Mid-Size
anything smaller than 550 the Aside and Section parts disappear (which I was able to do using #media in my CSS file)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle-A.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
#media only screen and (max-width: 550px) {
.aside {
display: none;
}
.section {
display: none;
}
}
It was easy to figure out the 550 using '#media' since I just have to not display it, but how could I use #media only screen and (max-width: 750px)to collapse it like the second picture?
550 and 750 isn't one of the standard breakpoint sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
the following would be similar to what you are looking for, but would break between the full view at smaller than 768, and then would hide the aside and section at under 576
<div class="row">
<div class="col-12">Header</div>
</div>
<div class="row">
<div class="col-12">Nav</div>
</div>
<div class="row">
<div class="col-12 col-md-9">Article</div>
<div class="col-12 col-md-3">
<div class="row">
<div class="d-none d-sm-block col-12">Aside</div>
<div class="d-none d-sm-block col-12">Section</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">footer</div>
</div>
If you really want to break at 750, and 550, you can override the breakpoints. See How to extend/modify (customize) Bootstrap 4 with SASS
so I'm teaching myself HTML and CSS from the bottom up. I just wanted to teach myself CSS Flexbox.
I wanted to make two simple columns to start with, but for some reason they are overlapping and I dont know why.
As you can see i've just stuck padding: 0 and margin: 0 in almost everything to try and get rid of it but I cant seem to fix it, so this must be a property I haven't learnt yet
Here's the code:
http://jsfiddle.net/58cshkzy/14/
html:
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial scale = 1">
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<div class="row2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
CSS:
html,
body {
height: 100%;
padding: 0px;
width: 100%;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: 50%;
border: 1px solid blue;
padding: 0px;
height: 100%;
}
.row2 {
width: 50%;
border: 1px solid blue;
padding: 0px;
margin-right: 0px;
height: 100%;
}
.flex-item {
background-color: tomato;
padding: 0px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-size: 1em;
font-weight: bold;
text-align: center;
}
Bootstrap is also having a class called row which styles are overriding your styles.
So rename the div class from row to row1 to see the effect.
Change the class name in the css file also.
<body>
<div class="flex-container">
<div class="row1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<div class="row2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
You use bootstrap so use bootstrap classes to make this flexbox:
html,
body {
height: 100%;
padding: 0px;
width: 100%;
}
body {
margin: 0;
padding: 0px;
}
.wrap{
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 0px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-size: 1em;
font-weight: bold;
text-align: center;
}
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6 wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<div class="col-xs-6 wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
</div>