Building a simple responsive grid - html

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.

Related

How to print page in two columns?

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>

Placing second column on top when page is resized

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>

How can I change the order of my Bootstrap columns?

Here is how the blocks are positioned on desktop within a row class which looks good on desktop.
Unfortunately, on xs device this looks not the way we need. I need this order when it's displayed on extra-small device:
1
3
2
Solution that doesn't work: I can't place the block 3 into block 1, as I need full width of block 3 on desktop (the 100% of the screen width, not the 100% of the block 1).
Any ideas how to change the order of 2nd and 3rd blocks with pure css on xs-devices so it is as
1
3
2
,
and not
1
2
3
as it is now?
Thank you.
Any ideas how to change the order of 2nd and 3rd blocks with pure CSS
on xs-devices so it is as
Try this:
<!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">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
.box {
height: 300px;
}
.box-1 {
background-color: orange
}
.box-2 {
background-color: blue;
}
.box-3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box box-1 col-sm-8 col-xs-12">
</div>
<div class="box box-2 col-sm-4 hidden-xs">
</div>
<div class="box box-3 col-xs-12">
</div>
<div class="box box-2 col-xs-12 hidden-sm hidden-md hidden-lg">
</div>
</body>
</html>
You might consider this solution in case there's no solution out there can help achieve your required behaviour with pure CSS
It is important to also include Container and Row.
https://getbootstrap.com/docs/4.0/layout/grid/
Does the original code look like this?
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-12">
1
</div>
<div class="col-sm-4 col-xs-12">
2
</div>
</div>
<div class="row">
<div class="col-sm">
3
</div>
</div>
</div>
Assuming block 2 has a fixed height and its always at most the same height with block one, you can do the following:
CSS:
<style type="text/css">
.wrap {
position: relative;
}
.block1 {
padding-right: 33.3333%
}
#media(min-width: 768px) {
.block2 {
position: absolute;
top: 0;
right: 0;
width: 33.333%;
}
}
</style>
HTML:
<div class="wrap">
<div class="block1">
<div class="col-sm-12">Block1</div>
</div>
<div class="col-sm-12">Block 3</div>
<div class="block2">
<div class="col-sm-12">Block 2</div>
</div>
</div>
Please note that with this method, if block 2 is longer than block one, it will overflow on block 3.
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Column Reordering in Bootstrap

Splitting the HTML page using div

I know this has been asked quite a few times here. But I'm not very experienced with HTML and am stuck following solutions suggested here.
My current implementation is like this. But the problem is if I stretch and adjust the browser window size, the borders of the four equal-sized quadrants follows. What I would like is:
The top area would be reserved for a load button and filter boxes.
The rest of the area would be divided up into four equally-sized quadrants.
When the browser window is adjusted, all five of these areas should not overflow into each other.
If I insert <div>'s inside each quadrant to draw plots, they should gracefully fall into place and will occupy four equally-sized areas regardless of the browser's size change.
What I'm trying to achieve looks something like in the picture below:
Thank you in advance for the help!
You can divide your 4 quadrants into 2 rows.
And give each row 100% width
and each quadrant a width of 50%
also,
make quadrants float left.
.row {
width: 100%;
padding: 0;
margin: 0;
}
.quad {
border: 1px solid black;
border-radius: 8px;
width: 49%;
padding: 0;
margin: 0;
height: 200px;
float: left;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Note: I have given 49% to quadrants so as to accommodate borders (they have 2 px width [1px each side])
You can also do this using flex CSS if you are targetting newer versions of browsers only.
In that case, you do not have to worry about widths.
Just give your row div : display: flex;
and your quadrants: flex: 1 1 auto;
Read more here about the flex display.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
.row {
display: flex;
}
.quad {
flex: 1 1 auto;
border: 1px solid black;
border-radius: 8px;
height: 200px;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Using bootstrap 4 you can easily create such an layout. Bootstrap makes it much easier for developers to create a layout.
If you wanna use bootstrap, you can do following. Bootstrap 4 uses flexbox instead of float which is +1 comparing to bootstrap 3.
.vh-100 {
min-height: 100vh;
}
.choose-plot {
padding-top: 15px;
padding-bottom: 15px;
}
.bordered {
border: 1px solid #ccc;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<div class="container-fluid d-flex h-100 flex-column vh-100">
<!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col choose-plot">
<strong class="mb-2">Add/remove COUNTRIES (max: 5), ADVERTISES (max 4), YEAR (max 1), and plot location below. Then, click 'load plot'.</strong>
<div class="row">
<div class="col-4">
<select class="custom-select">
<option>Choose plot</option>
</select>
</div>
<div class="col-8">
<button class="btn btn-primary">Load plot</button>
</div>
</div>
</div>
</div>
<div class="row flex-fill d-flex justify-content-start">
<div class="col-6 bordered">1 of 4</div>
<div class="col-6 bordered">2 of 4</div>
<div class="col-6 bordered">3 of 4</div>
<div class="col-6 bordered">4 of 4</div>
</div>
</div>
Dividing into rows too,
I suggest you to use box-sizing: border-box; so that when you set width to 50%, the borders sizes are taken into account.
.col {
width: 50%;
height: 160px;
float: left;
box-sizing: border-box;
border: 2px solid gray;
border-radius: 4px;
padding: 4px;
}
<div>Something here.</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">3</div>
<div class="col">4</div>
</div>
Hope it helps.

How to set more space between blocks Bootstrap?

My homepage consists of multiple blocks(top part/mid part/bottom part). I've created a row for each block. I want to add some space between my blocks in Bootstrap. Can I simply give my rows id's and add some margin, or is this wrong?
Structure of my code:
<div class="container" id="ho_main_content">
<div class="row">
<div class="col-md-12 text-center"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
This "answer" of mine should really be a comment; however, I don't have enough rep.
For an answer, yes, give the divs with the row class another class, probably something like this, spacing the top and bottom of each 10px:
.part {
margin: 10px 0;
}
An important thing to think about when using frameworks like bootstrap is that it isn't the end of the world if you modify the components or spacing or something. Some things won't look like you want them to; just give them extra classes, or if you are desperate, use the !important flag. It was built on the same technology, after all.
In bootstrap 5 I add g-0 to g-5 class with row class to add space around each col.
EX.
<div class="row g-3">
<div class="col">...</div>
<div class="col">...</div>
</div>
https://getbootstrap.com/docs/5.0/layout/gutters/
/*you can create your own custom css for use here is some example*/
.border {
border: 1px solid red; /* just to make sure space between blocks*/
}
.margin-top {
margin-top: 5px;
}
.nopad{
padding:0 ;
}
div[class*='spacer-'] { display: block; }
.spacer-mini { height: 20px; }
.spacer-small { height: 40px; }
.spacer-medium { height: 60px; }
.spacer-big { height: 100px; }
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main_content">
<div class="row border margin-top">
<div class="col-md-12 text-center">text1</div>
</div>
<div class="row border margin-top">
<div class="col-md-12">text2</div>
</div>
<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top -->
<div class="row">
<div class="col-md-6 col-xs-6 border">part1</div>
<div class="col-md-6 col-xs-6 border">part2</div>
</div>
</div>
</body>