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>
Related
I am trying to make a responsive design on the page using bootstrap grid.
Here is my HTML:
<div class="row row-2">
<div class = "col-sm-4 col-sm-offset-2">
<img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
</div>
<div class="col-sm-4 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>
The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small column class is it possible to put the second column on the top?
With code above the second column goes on the bottom. I can't interchange the content of the columns as I want first column to be on the left on the bigger screen.
Thanks in advance!
If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.
Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.reverse {
display: flex;
flex-direction: column-reverse;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
/* Desktop View */
#media (min-width: 1281px) {
.reverse {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="reverse">
<div class="row">
<div class="col">
Row 1
</div>
</div>
<div class="row">
<div class="col">
Row 2
</div>
</div>
</div>
</div>
you can do something like this if you don't want use bs4 or don't know how to use display:flex.
don't forget to change the class names as you want
.row-2 {
direction: rtl;
}
.row-2 .col {
direction: ltr !important;
border: 1px solid #eee;
background: #fefefe;
padding: 1rem;
}
.row-2 .col-md-offset-2{
margin-left: 0;
margin-right: 16.66666667%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-2">
<div class="col col-md-4 col-sm-12 col-md-offset-2">
<img class="img-responsive header-notebookImg" src="https://artbees-themes-artbees1.netdna-ssl.com/wp-content/uploads/2018/10/jupiter-x-bootstrap-logo.jpg" alt="">
</div>
<div class="col col-md-4 col-sm-12 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>
I see many custom css classes here, bootstrap has built-in css classes for that, no need to write custom ones.
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
I'm fairly new to semantic-ui. This is probably a pretty stupid question.
I'm struggling with creating a five column grid layout that is responsive/mobile friendly. Here's a quick image that shows what I am trying to do. Also, sorry for my sick MS Paint skills:
Computer:
Mobile:
Any ideas? :)
The outer container is straightforward I think. For the Segment which has 5 items in it, you can use something like:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet" />
<div class="ui container">
<div class="ui one column centered grid">
<div class="center aligned column" style="background-color: #B0C4DE;">
Some Row
</div>
<div class="column">
<div class="ui stackable five column grid">
<div class="column" style="background-color: #FFF8DC;">Item 1</div>
<div class="column" style="background-color: #F8F8FF;">Item 2</div>
<div class="column" style="background-color: #FFF8DC;">Item 3</div>
<div class="column" style="background-color: #F8F8FF;">Item 4</div>
<div class="column" style="background-color: #FFF8DC;">Item 5</div>
</div>
</div>
<div class="column" style="background-color: #E0FFFF;">
New Row
</div>
</div>
</div>
The grid is your friend https://semantic-ui.com/collections/grid.html
I think you forgot one of the best part on Semantic UI.
https://semantic-ui.com/views/item.html
Responsive Element
Item views are designed to be responsive with images stacking at mobile resolutions.
You just have to put your item elements on a ui items, and it's will works.
Looks here :
<div class="ui items">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
</div>
Using grids is cool, but you already have responsive element :)
Peace
I know you want to use semantic-ui but if you don't mind, you create your layout with bootstrap4 too.
Bootstrap4 methodology is mobile first, so create your html structure to adapt mobile and then grow from there.
Bootstrap use a grid system based on rows of 12 columns. You define the space taken for each column using the class col-x for mobile, col-md-x for medium width window, col-lg-x for large. "x" defines the number of columns (x<=12) taken by the div element. Check the Bootstrap4 documentation.
Remember to add the related js libraries and css to your html file.
Check this snippet:
#row-1{
background-color: orange;
}
#row-2{
background-color: yellow;
}
#row-3{
background-color: lightblue;
}
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<div class="container">
<div id="row-1" class="row">
<div class="col-12">
Row #1
</div>
</div>
<div id="row-2" class="row">
<div class="col-12 col-md-2">
Item 1
</div>
<div class="col-12 col-md-2">
Item 2
</div>
<div class="col-12 col-md-2">
Item 3
</div>
<div class="col-12 col-md-2">
Item 4
</div>
<div class="col-12 col-md-2">
Item 5
</div>
<div class="col-12 col-md-2">
Item 6
</div>
</div>
<div id="row-3" class="row">
<div class="col-12">
Row #3
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
I have an "index.html" and a "style.css" to accomplish this.
The html looks like this (call it "index.html"):
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="grid example for StackOverflow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Grid Example - by Rob Blansett.
</title>
</head>
<body>
<div class="Container">
<p>Container: Content should be horizontally centered.</p>
<div class="Row" id="One">
Row #1
</div>
<div class="Row" id="Two">
Row #2
<div class="Segment">
<div class="SegmentText">
Segment
</div>
<div class="Item" id="Item1">
Item #1
</div>
<div class="Item" id="Item2">
Item #2
</div>
<div class="Item" id="Item3">
Item #3
</div>
<div class="Item" id="Item4">
Item #4
</div>
<div class="Item" id="Item5">
Item #5
</div>
</div>
</div>
<div class="Row" id="etc">
Row ...
</div>
</div>
</body>
</html>
And the "style.css" looks like this:
* {
padding: 0;
margin: 0;
}
div {
display: block;
padding: 1em;
margin: 1em;
border-style: solid;
position: relative;
}
div.Container {
margin-left: 2%;
margin-right: 2%
}
div.Row {
background-color: grey;
}
div.Segment {
background-color: lightgrey;
}
div.SegmentText {
border-style: none;
}
div.Item {
background-color: darkgray;
}
/* If at least 500 pixels width is available then: */
#media (min-width:500px) {
div {
display: grid;
grid-gap: 1em;
padding: 1em;
margin: 0;
border-style: solid;
position: relative;
}
div.Container {
margin-left: 10%;
margin-right: 10%
}
div.Segment {
display: grid;
grid-template-columns: 1Fr 1Fr 1Fr;
}
div.SegmentText {
grid-column: 1 / 4;
border-style: none;
}
}
/* If at least 800 pixels width is available then: */
#media (min-width:800px) {
div {
display: grid;
grid-gap: 1em;
padding: 1em;
margin: 0;
border-style: solid;
position: relative;
}
div.Container {
margin-left: 20%;
margin-right: 20%
}
div.Segment {
display: grid;
grid-template-columns: 1Fr 1Fr 1Fr 1Fr 1Fr;
}
div.SegmentText {
grid-column: 1 / 6;
border-style: none;
}
}
Note that I've included #media queries for the window width. The default style set up is at the top of the CSS, then below that are the query sections that do the GRID stuff if there is a wide-enough window. So, it will be the one column if less than 500 pixels are available, and it will be 5 columns if at least 800 pixels are available. I included an intermediate size with 3 columns - just for fun. Re-size the window and see the adjustment between styles in action.
Here's link to working a copy:
http://technifusion.com/projects/web/grid-example-01.html
This just gives an idea of how it can be done.
Note: This solution does not use semantic-ui (that the original poster asked for) but this solution may still help people who are not using that framework.
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>
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 have been hitting a area which I dont belive is coverd in the bootstrap documentation which is to add margins to col in bootstrap.
To fix this I used the following code but the issue is the centre box is always smaller then the outer two.
Does anyone have a fix to this?
HTML
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="marginBoxes noMarginLeft">
<div class="clearBoth"></div>
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="marginBoxes">
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="marginBoxes noMarginRight">
</div>
</div>
</div>
CSS
.marginBoxes {
margin-left: 20px;
margin-right: 20px;
}
.noMarginLeft{
margin-left:0 !important;
}
.noMarginRight{
margin-right:0 !important;
}
Live Preview #
As suggested in the comments, I'd leave Bootstrap alone and make the boxes separate, possibly something along these lines:
#lightBlueFix { background-color: blue; }
#lightGrey { background-color: grey; }
#lightYellow { background-color: yellow; }
.bannerBox {
margin-left: 20px;
margin-right: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="bannerBox">
Blue
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="bannerBox">
Grey
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="bannerBox">
Yellow
</div>
</div>
</div>