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.
Related
i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:
You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>
Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>
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>
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 wanted to create 5 equal column on bootstrap for my responsive design with container-fluid. I have managed to do it. But I need one of those columns to disappear on lower resolutions. (Which I have already did as well) So on the mobile view I want to separate those 4 columns into two rows equally. However, my current code is failing to do it so. It gets separated into 2 rows but on the first row there are 3 equal column and on the second row there is only one column which is equal to those 3.
This is my current Bootstrap code;
<div class="container-fluid content">
<div class="row">
<div class="col col-xs-6">
<div class="stats">
<div class="big">111</div>
<div class="small">COLUMN 1</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">222</div>
<div class="small">COLUMN 2</div>
</div>
</div>
<div class="col d-none d-md-block">
<div class="stats">
<div class="big">333</div>
<div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">444</div>
<div class="small">COLUMN 4</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">555</div>
<div class="small">COLUMN 5</div>
</div>
</div>
</div>
</div>
What am I missing? Thanks.
col-xs-*- no longer exists in Bootstrap 4 beta. Use col-sm for equal width columns on sm and up, and col-6 for 50% width columns on mobile (xs)
https://www.codeply.com/go/W46IKaZhdR
<div class="container-fluid content">
<div class="row">
<div class="col-sm col-6">
<div class="stats">
<div class="big">111</div>
<div class="small">COLUMN 1</div>
</div>
</div>
<div class="col-sm col-6">
<div class="stats">
<div class="big">222</div>
<div class="small">COLUMN 2</div>
</div>
</div>
<div class="col d-none d-md-block">
<div class="stats">
<div class="big">333</div>
<div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div>
</div>
</div>
<div class="col-sm col-6">
<div class="stats">
<div class="big">444</div>
<div class="small">COLUMN 4</div>
</div>
</div>
<div class="col-sm col-6">
<div class="stats">
<div class="big">555</div>
<div class="small">COLUMN 5</div>
</div>
</div>
</div>
</div>
I am creating a grid based landing page with lots of nested columns. Was going well until I completed the load of nested columns and then the next row seems to overlap. In the code below the new container and row appear over the top of the last nested row. I'm sure its something really simple but I can't see where I've gone wrong and would appreciate the help.
<div class="container">
<div class="row">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 panel2">
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel4"></div>
</div>
<div class="row">
<div class="col-sm-12 panel3"></div>
</div>
</div>
<div class="col-sm-8 panel3">
<div class="row">
<div class="col-sm-6 panel2"></div>
<div class="col-sm-6 panel3"></div>
</div>
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel2"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 panel4">
</div>
</div>-->