I am currently developing an TYPO3 Extension for a website.
I am using bootstrap 4 and i have three different parts for the extension.
On web it should look like:
A B
C
and on mobile:
A
B
C
Mobile view is fine with my current approach:
mobile view
A is just a selection picker, B is a Google Map and C are Results.
The columns have different heights.
Currenlty looking like on web
My issue: I don't want Column C to have this much margin. In fact I want it to be just underneath column A.
My code:
<!DOCTYPE html>
<f:layout name="Default" />
<f:section name="main">
<div class="row kleingaerten container">
<select class="selectpicker col-12 col-sm-4" data-header="Wähle einen Bezirk" data-live-search="true">
<option data-tokens="">Alle Bezirke</option>
<f:for each="{bezirke}" as="bezirk">
<option data-tokens="b{bezirk.uid}" >{bezirk.name}</option>
</f:for>
</select>
<div class="col-12 col-sm-8">
<div id="map" style="width:100%; height:400px;" ></div>
</div>
<div class="col-12 col-sm-4">
<f:for each="{kleingaerten}" as="kleingarten">
<div class="card {kleingarten.bezirkClasses} " data-lat="{kleingarten.adresse.breitengrad}" data-lng="{kleingarten.adresse.laengengrad}" data-name="{kleingarten.titel}" data-strasse="{kleingarten.adresse.strasse}" data-hausnummer="{kleingarten.adresse.hausnummer}" data-plz="{kleingarten.adresse.postleitzahl}" data-ort="{kleingarten.adresse.stadt}" data-webauftritt='Kleingarten'
id="g{kleingarten.uid}" data-id="g{kleingarten.uid}"
>
<div class="container">
<h7><b>{kleingarten.titel}</b></h7>
<div>{kleingarten.adresse.strasse} {kleingarten.adresse.hausnummer}</div>
<div>{kleingarten.adresse.postleitzahl}
{kleingarten.adresse.stadt}</div>
Kleingarten
</div>
</div>
</f:for>
</div>
</div>
</f:section>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 col-md-4">
<div>
Part A
</div>
<div>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
</div>
</div>
<div class="col-12 col-md-8">
Part C (Map part in your app)
</div>
</div>
You don't need to separate as 3 parts.
You can insert A and B into one div like code snippet.
And You need to change
FROM
"col-12 col-sm-8"
"col-12 col-sm-4"
TO
"col-8 col-sm-12"
"col-4 col-sm-12"
Just follow this steps and fiddle or snippet below.(resize screen to check)
Step 1:Make B column first and use bootstrap class .float-md-right
Step 2:Make A column second and add class .order-first(for moving to top
in mobile view)
Step 3:Make C column last.
Wrap 3 columns A,B,C in div and add class .d-flex to make .order class to work and .flex-wrap class to wrap when screen size changes and .d-md-block to override .d-flex and make it work only on mobile devices
https://jsfiddle.net/raj_mutant/9vgL605f/
#map {
background: green;
}
.a-section {
background: yellow;
height: 100px;
}
.c-section {
background: red;
height: 400px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container my-4">
<div class="d-flex d-md-block flex-wrap">
<div class="col-md-8 col-12 float-md-right">
<div id="map" style="width:100%; height:400px;">B</div>
</div>
<div class="col-md-4 order-first">
<div class="a-section">
A
</div>
</div>
<div class="col-md-4">
<div class="c-section">
C
</div>
</div>
</div>
</div>
Related
I am looking for a technique to handle responsivity in html pages that have column-like structures with multiple items.
Here is an example:
Codepen
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:200;">
<div class="col-sm-6">
<div class="item">
First
<br><br>
</div>
<div class="item">
Second Second Second Second Second Second Second
<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
<div class="col-sm-6">
<div class="item">
First First First First First<br><br>
</div>
<div class="item">
Second<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
</div>
I would like it to look like this:
The height of each "item" needs to grow and shrink dynamically according to the length of its text and browser-window width, while staying aligned with the other column.
I also need that when the screen is narrow enough, the right column should move under the left column.
My problem is that for Bootstrap, I seem to need to place each column into a separate div.
On the other hand, when the columns appear side by side, if I want corresponding items to appear at the same height, I need to separate them into rows and not columns.
PS. I tried display:flex but could not find a way that works.
Any ideas?
Thanks
Arie
If you use BS3 but are willing to use flex aside, you can consider grid instead inside a mediaquerie and a custom class :
Your comment I react to:
Thanks G-Cyrillus. Is it possible to do that with Flex and Bs3? This is a large website which is built entirely with BootStrap3, and upgrading to Bs4 is currently not an option.
possible example with BS3, using a custom class inside a mediaquerie:
/*see us, demo purpose */
.row div {
box-shadow: 0 0 0 1px
}
/* custom class for the breakpoint where rows are drawn into columns with matching rows */
#media screen and (max-width: 992px) and (min-width:768px) {
:before,
:after {
grid-row: -1
}
.grid-md-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
}
.grid-md-2 [class^="col"] {
width: 100%;
grid-column: 1;
}
/*.grid-md-2 [class^="col"]:nth-child(3)~[class^="col"]*/
/* update for a repeating pattern */
.grid-md-2 [class^="col"]:nth-child(6n -2),
.grid-md-2 [class^="col"]:nth-child(6n -1),
.grid-md-2 [class^="col"]:nth-child(6n) {
grid-column: 2;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row grid-md-2">
<div class="col-sm-6 col-md-4 col-xs-12">
First
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Second
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Third
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
First First First
<br><br> First First
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Second<br>Second
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Third
</div>
</div>
</div>
The Bootstrap Grid layout is already dynamic in nature, so you don't need the style attribute for row width.
For the right column to go under the left column in the mobile view, use the bootstrap grid for mobile view. So just add the mobile view grid layout class name for each column div element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="item">
First
<br><br>
</div>
<div class="item">
Second Second Second Second Second Second Second
<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="item">
First First First First First<br><br>
</div>
<div class="item">
Second<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
</div>
For more visit Visit Here.
<div class="container container-fluid">
<div class="row">
<div class="col-lg-6">
<app-profile [conId]="conId"></app-profile>
</div>
<div class="col-lg-6">
<app-sales [conId]="conId"></app-sales>
</div>
</div>
</div>
I have no idea why this is happening.
Could it possibly be because I'm wrapping Angular component tags in the Bootstrap rows and columns? I'm almost certain I've done something like this before and it worked.
I've attached a picture of what's happening and highlighted where it's over lapping.
Edit:
Seems to look good if I remove the component tags and add some background color. So it may actually have something to do with the components themselves?
<div class="row">
<div style="background-color: red; height: 20px;" class="col-lg-6">
</div>
<div style="background-color: yellow; height: 20px;" class="col-lg-6">
</div>
</div>
Columns
I have this order in my grid when it's a normal sized computer screen:
{1}{2}
{3}{4}
{5}{6}
When i make the screen smaller i want it to reorder, but it doesn't reorder correctly.
Actual:
{1}
{2}
{3}
{4}
{5}
{6}
Wanted:
{1}
{3}
{5}
{2}
{4}
{6}
What kind of CSS formatting do I have to use to achieve the wanted display of my elements.
Current CSS:
.general {
background-color: pink;
order: 1;
}
.anonymous{
background-color: aqua;
order:4;
}
.dead{
background-color: blue;
order: 2;
}
.dead-and-archived {
background-color: green;
order:5;
}
.created {
background-color: yellow;
order:3;
}
.private {
background-color: red;
order:6;
}
Current HTML:
<div class="container-fluid">
<div class="row">
<div class="general col-sm-4" >
General
</div>
<div class="anonymous col-md-8">
Anonymous
</div>
</div>
<div class="row">
<div class=" dead col-md-4">
Dead entities
</div>
<div class=" dead-and-archived col-md-8">
Dead and archived
</div>
</div>
<div class="row">
<div class="created col-md-4 ">
Created entities
</div>
<div class="private col-md-8">
private user repos
</div>
</div>
</div>
What you should do is just change the way you put your content in divs.
Unless your HTML is set in stone, the most obvious way to get what you want is to structure your HTML so that it facilitates what you want.
If you want
{{1},{4}}
{{2},{5}}
{{3},{6}}
You shouldn't do
{{1},{2}}
{{3},{4}}
{{5},{6}}
Change your html so that it looks like this at a structural level:
<div class="column">
<div class="row">
square 1
</div>
<div class="row">
square 2
</div>
<div class="row">
square 3
</div>
</div>
<div class="column">
...
</div>
Now use CSS to give the columns a width so that they are next to eachother, and when you use a mobile device, the right one is placed under the left one.
The alternative way to do this is to add responsive css rules that apply absolute positioning, but really, that is just a nasty way to accomplish what you want.
I hope this will be helpful:
N.B. feel free to change the classes value according with your needs
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">3</div>
<div class="col-xs-12">5</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">2</div>
<div class="col-xs-12">4</div>
<div class="col-xs-12">6</div>
</div>
</div>
</body>
</html>
I am designing a stair grid for showing the growth of a child in 4 up steps.
What I did is: created four rows containing 4 columns. From the first div, I removed the first three column and put content in fourth. Similarly, on next bottom div I put content in the third column then in next bottom filled the second column.
After all these, I put top margin negative so that it looks like a stair.
I know this is not a good approach. How can I improve that?
I want it to be like this:
Current code:
<!--Here i have used the last column and col-md-9 remains blank-->
<!-- First row -->
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 ml-md-auto bg-alert">
<img src="img/career/info2/4.png" class="img-responsive">
</div>
</div>
<!--Here i have used the second last column and col-md-6 remains blank-->
<!-- secondrow -->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3" style="margin-top:-14rem;">
<img src="img/career/info2/3.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
</div>
<!--Here i have used second column and remains blank-->
<!-- Third row -->
<div class="row">
<div class="col-md-3 ml-md-auto"></div>
<div class="col-md-3 ml-md-auto" style="margin-top:-37rem;">
<img src="img/career/info2/2.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
<div class="col-md-3 ml-md-auto"></div>
</div>
<!--Here i have used the first column and col-md-9 remains blank-->
<!-- Fourth row -->
<div class="row">
<div class="col-md-3">
<img src="img/career/info2/1.png" class="img-responsive">
</div>
<div class="col-md-9"></div>
</div>
Here's one way to solve this problem:
You put 4 columns into one single .row and then add 3 custom classes to the first 3 columns (.step-1 / .step-2 / .step-3).
Using #media (min-width: 768px) you ensure that those custom classes only kick in on medium (md) screens or larger. Then you add margin-top to each column as needed to push it down.
On screens that are smaller than md the 4 columns will stack up in the right order without any top margins affecting them.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#media (min-width: 768px) {
.step-1 {
margin-top: 150px;
}
.step-2 {
margin-top: 100px;
}
.step-3 {
margin-top: 50px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 step-1">Step 1</div>
<div class="col-md-3 step-2">Step 2</div>
<div class="col-md-3 step-3">Step 3</div>
<div class="col-md-3">Step 4</div>
</div>
</div>
I have 4 rows of content with 2 columns in each row, and this looks great on laptops. I tried to use bootstrap to line up the columns differently on mobile, so that each row only has one column instead of two. I know if the row has 2 divs in in and each div takes 12 sections, in theory the 2nd div will just to the row underneath but it's not working. For some reason, this isn't both columns are aligned next to each other and squished together instead of one being under the other. How do I get this to look better on mobile? Here is what one row looks like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-6">
<a class="link-image" target="_blank" href=link>
<div class="picture" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url(some image);">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6">
<div class="description">
<h4> link </h4>
<p>Some text</p>
</div>
</div>
</div>
-xs is no longer used in Bootstrap 4.
Using correct V4 classes you would want to use <div class="col-12 col-sm-6">...</div>
Valid sizing for Grid is now:
.col-*
.col-sm-*
.col-md-*
.col-lg-*
Per Bootstrap documentation: https://getbootstrap.com/docs/4.0/migration/#grid-system-1
Your code is fine. It works.
The reason you see only 1 row is that the 1st <div class="col-xs-12 col-sm-6"> has no content, yet generate no height nor width.
Solution:
just add content to the 1st <div class="col-xs-12 col-sm-6">, it will appear
in case you want to leave it blank, set the attribute min-height.
I put some color in the sample for visual purpose.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-xs-12 col-sm-6" style="background-color: dodgerblue; min-height: 76px;">
<a class="link-image" target="_blank" href=link>
<div class="picture" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url(some image);">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6" style="background-color: coral;">
<div class="description">
<h4> link </h4>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
Output (screenshot):