Here is what I have
And here is what I want to accomplish
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div>
</body>
</html>
You need to try like this-
Just use this below script -
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display:inline-flex;
vertical-align:top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class=" grid js-masonry">
<div style="height:200px;" class="card grid-item">1</div>
<div style="height:240px;" class="card grid-item">2</div>
<div style="height:200px;" class="card grid-item">3</div>
<div style="height:270px;" class="card grid-item">4</div>
<div style="height:300px;" class="card grid-item">5</div>
<div style="height:250px;" class="card grid-item">6</div>
</div>
import bootstrap and format the divs using col-md- in rows. i believe you have that css.
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-4">
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div></div>
<div class="col-md-4">
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div></div>
<div class="col-md-4">
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div></div>
</div>
</body>
</html>
This is not possible using plain CSS.
You can either change your HTML to have a wrapping "column" div for every two (in your case) .card elements, or alternatively there are lots of javascript plugins that you can easily achieve this layout by manipulating the HTML dynamically... Check http://masonry.desandro.com/ as one good example
This is the quick answer; but for DIVs with dynamic heights, I beleive it's better using a jQuery plugin (e.g. masonary as Ronen mentioned).
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px; top:-40px; position:relative;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px; top:-40px; position:relative;" class="card">6</div>
</body>
</html>
Related
Having the following code (pen here), I tried to autofit the second column width to its content with auto margins that does not seem to work.
.col {
border: 1px solid red;
}
.autofit {
margin: auto;
width: auto;
max-width: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row m-5">
<div class="col">1</div>
<div class="col autofit">2*</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Is there another way to autofit the column width?
I also tried width: fit-content(100px);, but it didn't work either...
You can use the Bootstrap-class .col-auto for this. Simple and effective!
.col, .col-auto {
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row m-5">
<div class="col">1</div>
<div class="col-auto">2*</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
I have the following HTML page:
<div class="container">
<div class="row">
<div class="col-md-6">
<page size="A5"></page size="A5">
</div>
<div class="col-md-6">
<page size="A5"></page size="A5">
</div>
</div>
</div>
When I try to print this document in album mode A4, I am not getting one sheet divided in two parts A5.
How to do that?
So first of all I don't think that is an actual HTML tag.
Try to change the tag to an with the required css. Open up the code snippet in full screen to see the result.
.page {
background-color: black;
height: 21cm;
width: 14.8cm;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="page"></div>
</div>
<div class="col-md-6">
<div class="page"></div>
</div>
</div>
</div>
CSS has provided the grid display so outer package like bootstrap isn't that necessary for this task. You can also customize the gap between 2 pages by using the attribute gap under the .row style in the CSS. Also this reference may help you on building paper-like appearance.
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
<div class="container">
<div class="row">
<div class="col col-md-6">
<page size="A5"></page size="A5">
</div>
<div class="col col-md-6">
<page size="A5"></page size="A5">
</div>
</div>
</div>
I'm trying to get three equally sized columns with same margin and background color. But I get column 1 with no margin and background color, column 2 and 3 appear no problem. I'm finding this really frustrating so any help would be greatly appreciated!
Here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
div1 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div2 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div3 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</body>
</html>
Here's the similar result i'm trying to get:
Here's the wrong one what I get:
As your using bootstrap you may as well use bootstrap, plus a little bit of css to pad the inner panels (to match your desired output). The HTML is all over the place (head code and div*'s).
So here is your code.
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.panel-pad-10 {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 1</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 2</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
From: http://getbootstrap.com/css/#overview-container
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
So, wrap it up in a container like this:
<div class="container">
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</div>
Or use "container-fluid" if you want full width
EDIT: As Lawrence pointed out, if you're going to use custom markup, you need to be sure that it has the display:block property set, otherwise it will not work
Just use Bootstrap. You don't want to override what Bootstrap provides.
<div class="row">
<div class="col-sm-4">
<div class="well">1
</div>
</div>
<div class="col-sm-4">
<div class="well">2
</div>
</div>
<div class="col-sm-4">
<div class="well">3
</div>
</div>
</div>
http://www.codeply.com/go/lUApj2LpiJ?q=
Have you tried Flexbox ?
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
min-height: 800px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 400px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
You really shouldn't "invent" your own html tags like this. <div1> is not a valid HTML tag.
Also, since div1, div2, and div3 all are supposed to be styled the same way, you can simply create a class for them like this:
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
Then, in your html, do this (combined with LordNeo's reply):
<div class="container">
<div class="row">
<div class="col-sm-4 column">Column 1 Div</div>
<div class="col-sm-4 column">Column 2 Div</div>
<div class="col-sm-4 column">Column 3 Div</div>
</div>
</div>
I'm trying to center a bunch of divs with a fixed size. I want it to work with a relative/unspecified window size. The code below works so long as the divs don't wrap around to the next line. As soon as they wrap, everything gets aligned to the left. The plan is to dynamically generate lots of these and have it be vertically scrollable only. My CSS skills are pretty weak. Any advice? Thanks in advance.
.container {
margin: 0 auto;
display: table;
}
.block {
background: #999;
float: left;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<!--
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
-->
</div>
</body>
</html>
You can use display:inline-block; instead of float:left and then give text-align:center; to their parent and don't forget to remove extra spaces which is occurred by display:inline-block;
.container {
margin: 0 auto;
display: table;
text-align:center;
}
.block {
background: #999;
/* float: left; */
display:inline-block;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
</div>
</body>
</html>
I'm straggling with a simple layout issue:
Basically my goal is to create a toggled side menu. When the side menu is visible the main layout is 80% width, and when it is not visible the main layout would be 100% width, like so:
I'm using bootstrap 3 and would like to use their CSS markup, so I can add rows and columns to the main div (Lt-orange in the illustration).
Any help would be appreciated :)
EDIT:
Here is my progress so far:
<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
<div style="border:solid 1px red">
<div class="row">
<div class="col-lg-6">Some Content</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">Some content</div>
</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>
Demo
Actually, you can't use 20% because bootstrap grid size works with 12s. Which means 100%=12/12 so 1/12 is 8,33% is the smallest unit. What is closest to you is for the sidebar to be 3/12=25%. Giving you code for this:
<div class="row">
<div class="col-xs-12 col-sm-3">
sidebar content
</div>
<div class="col-xs-12 col-sm-9">
main content here
<div class="row">
<div class="col-xs-12">
your 100% main content here
</div>
</div
</div>
I assume the bottom photo shows how it will look on a mobile device..?
I was working on a similar kind of solution, below is the snippet of code that works for me
below is the file (test.php)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Demo</title>
<link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="PATH/demo.css">
<script type="text/javascript" src="PATH/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-sm-3 side20" > This is side content</div>
<div class="col-sm-9 main80">This is the main content.</div>
</div>
<button class="btn btn-default" role="button">Toggle</button>
<div class="row" >
<div class="col-sm-3 side20" >n</div>
<div class="col-sm-9 main80" >This is the main content</div>
</div>
<footer class="row">
<div class="col-xs-6 copyright">
© Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
<small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>
The sample css is (demo.css)
.container{
width: 100%;
background: #0081c2;
}
.side20{
background: #3e8f3e;
}
.col-sm-3{
display: block;
background: #3e8f3e;
height: 200px;
border: solid 2px #000000;
}
.main80{
background: #8D0D19;
height: 200px;
border: solid 2px #000000;
}
.col-sm-12{
background: #8D0D19;
}
footer{
min-height: 50px;
background: #010102;
border-radius: 3px;
}
.copyright{
text-align: center;
line-height: 50px;
color: #fff;
}
.design{
text-align: right;
line-height: 50px;
color: #FFF4B9;
}
And the toggle function is achieved by the below jQuery script (custom.js)
$(".btn").on("click", function(){
$(".col-sm-3").toggle();
$(".main80").toggleClass("col-sm-12");
$(".main80").toggleClass("col-sm-9");
});
Hope this helps. Happy coding!!
Found a CSS only solution , basically I'm using table display:
HTML + CSS:
<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
<div style="display:table-row">
<div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
<div style="display:table-cell">
<div class="row">
<div class="col-xs-6">6 col</div>
<div class="col-xs-6">6 col</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>
here is a JS fiddle, that toggles the display of the cell