I want to achieve the following layout on desktop:
[1][2]
[3][2]
I need column 2 to be the height of 1 and 3 on desktop.
Then on mobile I want it to look like:
[1]
[2]
[3]
I tried 2 options:
Option 1:
<div class="row">
<div class="col-md-7">
<span>1</span>
</div>
<div class="col-md-5">
<span>2</span>
</div>
<div class="col-md-7">
<span>3</span>
</div>
</div>
The problem is that block 2 is the height of block 1 only.
Option 2:
I thought about using column ordering to insert block 2 between block 1 and block 3:
<div class="row">
<div class="col-md-7">
<div>
<span>1</span>
</div>
<div>
<span>3</span>
</div>
</div>
<div class="col-md-5">
<span>2</span>
</div>
</div>
But I don't think it's possible this way.
Is there another method I didn't think about? or is it possible using one of the methods above?
Thanks.
try something like this
#flex_box1 div
{
width:100%;
height:150px;
border: 2px solid #555;
margin-bottom:15px;
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
width:100%;
height:100%;
background-color: #555;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<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">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 d-flex flex-column" id="flex_box1">
<div></div>
<div></div>
</div>
<div class="col-8 " id="flex_box2">
<div></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
I can suggest you to use library called Masonry. It is quick and easy to implement. Link: https://masonry.desandro.com/
With this you can get desired result for both desktop and mobile version as you mentioned.
Demo:
https://codepen.io/Bibeva/pen/qBExWjj
HTML:
<!-- bootstrap 4 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row grid">
<div class="col-md-6 grid-item">
<span>1</span>
</div>
<div class="col-md-6 grid-item grid-item-box">
<span>2</span>
</div>
<div class="col-md-6 grid-item">
<span>3</span>
</div>
</div>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- masonry js cdn-->
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.js"></script>
<!-- custom js -->
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
</script>
CSS:
.grid-item {
background: #000;
color: #fff;
height: 100px;
}
.grid-item-box {
height: 200px;
background: #333;
}
.container1{
display:inline-flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
position: relative;
}
.container1 div {
height: 50vh;
width: 200px;
margin: 0;
border: 1px solid black;
color: #fff;
text-align: center;
align-items: center;
display: inline-flex;
justify-content: center;
font-size: 50px;
font-weight: bold;
}
.div1 {
background: #f60;
}
.div2 {
background: #f55;
height: 100vh!important;
}
.div3 {
position: absolute;
bottom: 0;
left:0;
background: #0ae4dd;
}
<div class="container1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
<pre>
**For Mobile View**
#media(max-width: 992px){
.container1{
flex-wrap: wrap;
width: 100%;
max-width: 100%;
}
.container1 div {
width:100%;
height: auto;
}
.div2 {
height: auto!important;
}
.div3{
position:inherit;
}
}
</pre>
If someone will need a solution in the future, I ended up using flex-direction: column and put height on the container:
HTML:
<div id="flex-container" class="row flex-lg-column">
<div class="col-12 col-lg-6 order-1">
<span>1</span>
</div>
<div class="col-12 col-lg-6 order-3">
<span>2</span>
</div>
<div class="col-12 col-lg-6 order-2">
<span>3</span>
</div>
</div>
CSS:
#media (min-width: 992px) {
#flex-container {
max-height: 40rem;
}
#flex-container .order-1,
#flex-container .order-2,
#flex-container .order-3 { order: initial; }
}
And becuase Bootstrap 4 .row has flex-wrap: wrap, block 3 will wrap to the right side of the two blocks on lg screens.
Related
html,
body {
height: 100%;
margin: 0px;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: yellow;
}
.box {
flex-shrink: 0;
}
<div>
<div class="container">
<div class="box">
<h1>A</h1>
<p>clap</p>
</div>
<div class="box">
<h1>W</h1>
<p>clap</p>
</div>
<div class="box">
<h1>S</h1>
<p>clap</p>
</div>
<div class="box">
<h1>D</h1>
<p>clap</p>
</div>
<div class="box">
<h1>Q</h1>
<p>clap</p>
</div>
<div class="box">
<h1>E</h1>
<p>clap</p>
</div>
<div class="box">
<h1>R</h1>
<p>clap</p>
</div>
</div>
</div>
how to (.containeri) full screen with flex display?
I want full window full height and width with flex?
I use height 100% but it is not full window with flex property.but in grid it is 100% window with height anf width
It looks like you need to set shrink to 0 to prevent the flex items from shrinking:
.container {
display: flex;
width: 100%;
height: 100%;
background-image: url("asso-myron-HZCBJmlUPas-unsplash.jpg");
}
.flex-item {
flex-shrink: 0;
}
An example:
.flex-container {
display: flex;
width: 100%;
height: 100%;
}
.flex-item {
flex-shrink: 0;
}
<div class="flex-container">
<div class="flex-item">
1
</div>
</div>
Try these codes.
body {
margin:0;
}
.container {
height:100vh;
background-repeat:no-repeat;
background-size: 100% 100%;
object-fit:cover;
display: flex;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxD1r0WianEq0iQy_H8INxLhdpmcz6c_DslA&usqp=CAU");
}
<body>
<div class="container"></div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-flex p-3 bg-secondary flex-shrink-0 text-white">
<div class="p-2 bg-info">Flex item 1</div>
</div>
</body>
</html>
I think you want this.
If not then Kindly attach html code.
I'm still so stuck on this issue with my CMS and how to make it so that a user can drag an image of any size into a column/row (bootstrap) and it will responsively scale to fit.
First of all, this isn't for a website but it's a CMS where users create static pages that will show on digital displays so there is no scrolling at all. There is a banner (header) and a ticker/footer as the top and bottom rows, then the middle row has the main column where the images will sit. So no matter what, the images dragged into that area need to scale to fit so that the image remains in the column area which remains between the header and footer.
Currently, I can drag an image of reasonable size in and it sits fine but if I put a huge image in there it totally breaks the middle row/column AND breaks past the footer as well, as opposed to scaling down to fit. it should be responsive as much as possible while fitting in the bounds. Examples of those two:
Large placeholder image breaking the column
So in the images, the red area is the bootstrap column/row in question that the image is breaking. The 2nd image shows a 2000x2000 placeholder breaking out of the area and beyond the bottom row with the ticker. IN both images, the dark grey bars are the top and bottom rows.
Again, no matter what size image the user drags into this area and saves, regardless of what display it shows on it should always show the top and bottom rows, with a column in the middle of them with a scaled image.
My code is below
How exactly can I rectify this so that I don't have to worry about users dragging massive images into an area and they won't display properly once saved?
<style type="text/css">
#import "style.css";
html,
body {
height: 100%;
width:100%;
overflow: hidden;
}
.middle iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img{
max-width: 100%;
height: auto;
}
.fullContent > img{
max-width: 100%;
height: auto;
}
.topLeftContent > img{
max-width: 100%;
height: auto;
}
.bottomLeftContent > img{
max-width: 100%;
height: auto;
}
.rightContent > img{
max-width: 100%;
height: auto;
}
.leftContent > img{
max-width: 100%;
height: auto;
}
.topRightContent > img{
max-width: 100%;
height: auto;
}
.bottomRightContent > img{
max-width: 100%;
height: auto;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width:100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-image: url('images/bg6.jpg');
background-size: cover;
}
</style>
<div class="row top">
<div class="row">
<div class="col-lg-12" style="background-color:grey">
<div class="row" style="background-color: #929292;">
TOP
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 15px;">
<p>(Content must fit within bounds of dotted border)</p>
</div>
<div class="row middle" id="background">
<form><input type="hidden" name="panel" value="background"></form>
<div class="col-lg-12 fullWidth" id="full">
<form><input type="hidden" name="panelFull" value="full"></form>
<div class="fullContent" style="background-color: red; height: 100%; border: dotted 1px black;">
<img src="https://via.placeholder.com/2000">
</div>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style="background-color:grey">
<div class="marquee"><h2>Ticker</h2></div>
</div>
</div>
if you are using bootstrap, its so easy
<div class="row">
<div class="col-12">
<img class="img-fluid" src="YOUR_IMG_SRC">
</div>
</div>
Here is the template, you can use and edit as per your requirements
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style type="text/css">
body{background-color: #e8eef0;}
</style>
<title>Main</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<h3 class="text-center py-3">Header Section</h3>
</div>
</header>
<div class="row w-100">
<div class="container">
<div class="border border-danger p-5">
<h6 class="text-center">Main Image Section</h6>
</div>
</div>
</div>
<footer class="bg-dark">
<div class="container">
<h5 class="text-center py-3 text-white">Footer Section</h5>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- CDN Link for jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- CDN Link for popperjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- CDN Link for Bootstrapjs -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to make two full height bootstrap columns like the example here : Twitter bootstrap 3 two columns full height
But the problem is that it show me the first column content (col-md-2) after the second one content (col-md-10).
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
html,body,.m-container
{
height:100%;
}
.m-container
{
display:table;
width: 100%;
margin-top: 50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-2 .no-float, .col-md-10 .no-float {
float: none;
}
.col-md-2
{
float: none;
display: table-cell;
background: pink;
}
.col-md-10
{
display: table-cell;
background: yellow;
float: none;
}
</style>
</head>
<body>
<header>Header</header>
<div class="m-container">
<div class="row">
<!-- Data sources accordion -->
<div class="col-md-2">
<div class="well">I'm another well</div>
</div><!-- /end of col -->
<!--
Wall of panels
-->
<div class="col-md-10">
<div class="col-md-6">
<div class="well">I'm the first well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the second well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the third well</div>
</div>
</div>
</body>
</html>
I'm trying without using col-md-6 in the col-md-10 part and it works, but i should use col-md-6
Someone have an idea why i have this problem?
Above the JSFiddle link to my code
JSFIDDLE Code
I have a fixed header and right aside of 260px. I have three columns with height 100%.The content area to be a fluid-container that is 12 column wide.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Below is the fiddle i am working on. The width of the cols are breaking with the layout.
http://codepen.io/anon/pen/qxusJ
Not really clear what you mean by The width of the cols are breaking with the layout.
Try it this way :
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:lightgray
}
.container {
display:table;
width:calc(100% - 260px);/*keep container 100% - 260px */
border-spacing:0.5em;
}
I don't quite understand; you want the container to be fluid, but then you have columns within it that have a fixed width?
How you could do it is:
<div class="header"></div>
<div class="container">
<div class="secondary-aside"></div>
<div class="content">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With the following CSS:
html, body {
height: 100%;
}
.header {
height: 60px;
background: blue;
width: 100%;
}
.container {
overflow: auto;
height: 100%;
}
.secondary-aside {
width: 25%;
float: right;
background: red;
height: 100%;
}
.content {
width: 75%;
float: left;
background: #777;
overflow: auto;
height: 100%;
}
.col-sm-4 {
height: 100%;
background: yellow;
width: 33.3333%;
float: left;
}
Would that help?
I don't understand why you use so much of custom styles in BS.
Check the responsiveness of the page in http://www.responsinator.com/
Check this out.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.secondary-aside {
width: 25%;
float: right;
background: #000000;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
<div class="col-sm-4" style="background-color: red">r</div>
<div class="col-sm-4"style="background-color: green">g</div>
<div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>
I have 3 elements and I am trying to align the button to the right side of the screen, but am having trouble doing so.
<div class="container">
<div class="row-fluid">
<h4>
<img src="img.png" style="width:50px;">
Title
Grab it!
</h4>
</div>
</div>
Try the class 'pull-right'.
<div class="pull-right">...</div>
See http://getbootstrap.com/css/#helper-classes-floats
try something like this
<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>
Utilise justify-content-end
From the bootstrap documentation, it says:
Bootstrap 3 used .navbar-left and .navbar-right for navbar alignment.
Bootstrap 4 uses the various helper classes.
(Alignment part)
https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm
and here more info about the new alignment
https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<style>
.wrapper {
display: flex;
align-items: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div class="wrapper justify-content-end">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</html>
https://plnkr.co/edit/LtfW2fj9f3E9Ehj1M8jN?p=catalogue
In Bootstrap v4:
<div class="float-right">Float right on all viewport sizes</div>
Bootstap v4 docs
In Bootstrap v5:
<div class="float-end">Float end on all viewport sizes</div>
Bootstrao v5 docs