I am trying to place two cards among each other beside one larger card using the materialize framework.
The code I am currently using looks like this:
<div class="row">
<div class="col s6">
<div class="card-panel">
<div class="card-content">
<h5 class="blue-grey-text text-lighten-2">p1</h5>
</div>
</div>
</div>
<div class="col s6">
<div class="card-panel">
<div class="card-content">
<h5 class="blue-grey-text text-lighten-2">p3</h5>
</div>
</div>
</div>
<div class="col s6">
<div class="card-panel">
<div class="card-content">
<h5 class="blue-grey-text text-lighten-2">p2</h5>
</div>
</div>
</div>
</div>
And the result looks like this:
But I would like to place p1 and p2 directly beside p3, so that the layout looks like this:
Is this somehow possible using materialize?
You can try something like this.
<div class="row">
<div class="col s6">
<div class="row">
<div class="col-12">
P1
</div>
</div>
<div class="row">
<div class="col-12">
p2
</div>
</div>
</div>
<div class="col s6">
P3
<div>
</div>
Related
I'm building a responsive front with Bootstrap 4 and I can't do what I want.
I made the result I want on codepen but I'm trying to avoid duplicate code for desktop+mobile.
<p>On desktop</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-3">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-9">
<div class="row">
<div class="col col-md-8 ">
<div class="content-a">ContentA</div>
</div>
<div class="col col-md-4">
<div class="button">Button</div>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<div class="content-b">Content B</div>
</div>
</div>
</div>
</div>
</div>
<p>On mobile</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-6">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-6">
<div class="content-a">Contant A</div>
</div>
<div class="col col-md-12">
<div class="content-b">Contant B</div>
</div>
<div class="col col-md-12">
<div class="button">Button</div>
</div>
</div>
</div>
https://codepen.io/sanchou/pen/YzyXaQW
Is this possible to make? How could I achieve that?
You could consider implementing your layout using flexbox:
Bootstrap Flex
You can change the order of 'Content B' and 'Button' using order class.
Keep in mind that some older browsers might not support it though.
I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:
HTML:
<div class="container-fluid" style="text-align:center">
<div class="row" style="text-align:center">
<div class="col-md-12" style="font-size:22px">All Blogs </div>
<br><br><br><br>
</div>
<br>
<br>
<div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
<!-- Card Start -->
<div class="card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-3">
<a [routerLink]="['/blog', blog.id]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-5 px-3">
<div class="card-block px-6">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
<br>
<app-blog-category></app-blog-category>
</div>
</div>
Here's a template based on the image. I did an 8 and 4 grid size since bootstrap uses the 12 column system but feel free to alter these numbers as needed.
<div class="container-fluid">
<div class="row">
//this col contains your three card rows
<div class="col-md-8">
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
//this is for your shared component
<div class="col-md-4">
<shared-component></shared-component>
</div>
</div>
</div>
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
How to merge 2 rows and 2 columns to become 1 big box in Bootstrap 4?
Before:
To be like this:
HTML
<div class="container">
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
</div>
I have made some changes to your html structure, also used some b-4 classes (h-100) to align it. read boostrap-4 document to understand grid system.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
<div class="w-100"></div>
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
</div>
</div>
<div class="col">
<div class="row h-100">
<div class="col border h-100">.col-3</div>
</div>
</div>
</div>
</div>
Hope this helps. Note i did not add background colors or classes to keep the answer clean
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">A</div>
<div class="col-sm-6">B</div>
</div>
<div class="row">
<div class="col-sm-6">C</div>
<div class="col-sm-6">D</div>
</div>
</div>
<div class="col-sm-6">
F
</div>
</div>
JSFIDDLE LINK
I have to create this layout responsive for a custom slider:
https://imgur.com/YbKdOAC
https://imgur.com/TPo2h57
-The icon of an image is where the slides are going to be.
-There is another pink block with the controls of the slider.
-The last pink block has some text. Nothing special.
There are 2 background-images in those patterns.
I began with the desktop version using flexbox, but when I try to adjust the layout to the tablet version, it was imposible because this two elements are in different rows.
https://imgur.com/Upjsh8B
This is more or less my code right now:
<div class="slider">
<div class="container">
<div class="row">
<div class="col-3">
<img class="logo-img"
src="assets/images/logo.png">
<div class="titulo-boton">
<h1>Lorem ipsum</h1>
</div>
</div>
<div class="col-9">
<div class="row primera" primera>
<div class="col yourtrip">
<h2>Lorem ipsum</h2>
<hr>
<p class="tags">#tags</p>
</div>
<div class="col"></div>
<div class="col ">
<div class="image-slider image-wrap">
<!-- <img src="assets/images/rocket.png">-->
</div>
</div>
</div>
<div class="row" segunda>
<div class="col"></div>
<div class="col controls" controls>
<div class="botones row w-100">
<div class="col p-0">
prev
</div>
<div class="col p-0">
next
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your help!
Edit:
I have created a pen to make the things easier. The assets are different but the layout is the same.
https://codepen.io/jenvigo/pen/jRrwdw?editors=1100