I am trying to achieve this using Bootstrap 4 and some custom CSS style
This is what I have so far:
<div class="container">
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-header d-flex justify-content-around">
<div class="card-icon">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
</div>
<div class="card-category">
<p>Used Space</p>
<h3>49/50</h3>
</div>
</div>
<div class="card-body ">
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
</div>
</div>
I am unable to get this result I am new to CSS and Bootstrap.
Related
I'm trying to code an HTML5 landing page with bootstrap.
I'm dividing screen into 2 md-cols with an image in each column.
I want to put a text over each image and flipping effect on hover than brings 4 more logo images with links to external pages.
Below is what I got so far:
<main class="p-3 my-auto">
<div class="row">
<div class="col-md-6 mb-5">
<div class="imgContent w-100 p-1 bg-light rounded-3">
<img src="img/eye.jpg" class="img-fluid"/>
</div>
<div class="links">
<div class="row">
<div class="col-xs-2">logo1</div>
<div class="col-xs-2">logo2</div>
</div>
<div class="row">
<div class="col-xs-2">logo3</div>
<div class="col-xs-2">logo4</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="imgContent w-100 p-1 bg-light rounded-3">
<img src="img/joint.jpg" class="img-fluid"/>
</div>
<div class="links">
<div class="row">
<div class="col-xs-2">logo1</div>
<div class="col-xs-2">logo2</div>
</div>
<div class="row">
<div class="col-xs-2">logo3</div>
<div class="col-xs-2">logo4</div>
</div>
</div>
</div>
</div>
</main>
Any idea?
Thanks in advance
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
I have one div that is a row and inside a few more rows with two col classes each. But what is strange is the first two col-3 classes take different width than the next two col-3 classes which makes the element un-aligned one on top of another. The code is bellow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3 w-100">
<h5 class="text-center w-100">Color Legend</h5>
<div class="row">
<div class="col-3 w-100">
<i class="far fa-circle circle px-2"></i>
</div>
<div class="col-9 w-100">
<p>Not visited topic</p>
</div>
</div>
<div class="row">
<div class="col-3 w-100">
<i class="far fa-circle circle px-2" style="color:#016fc9;"></i>
</div>
<div class="col-9">
<p>Visted topic</p>
</div>
</div>
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#00bfa5"></i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>successfully</strong> answered.</p>
</div>
</div>
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#f44336"></i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>failed</strong> after visting.</p>
</div>
</div>
</div>
Here is a screen of the result
https://i.stack.imgur.com/LRgqd.png
You are breaking the .row > .col hierarchy. Meaning col should have .row as a parent and vice versa. In your case, you have .row as parent and child, which is why you had to give .w-100. Please try the below code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3">
<div class="col-12">
<h5 class="text-center">Color Legend</h5>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2">I</i>
</div>
<div class="col-9">
<p>Not visited topic</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#016fc9;">I</i>
</div>
<div class="col-9">
<p>Visted topic</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#00bfa5">I</i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>successfully</strong> answered.</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#f44336">I</i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>failed</strong> after visting.</p>
</div>
</div>
</div>
</div>
I am learning to create a website by downloading and editing contents.
I have created a section in the home page which shows the images of all stores of a shop. I need to display 3 stores image on the home page and add a View all button in the right bottom side of the section.
I have tried many ways but can't get it done in a good way.
Below is the HTML Code :
<!-- OUR STORES Section -->
<section id="stores" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Stores</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#storeModal1" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store01.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 01</h4>
<p class="text-muted">Location 01</p>
</div>
</div>
<div class="col-md-4 col-sm-6 store-item">
<a href="#storeModal2" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store02.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 02</h4>
<p class="text-muted">Location 02</p>
</div>
</div>
</div>
</div>
</section>
Why not just adding a new row, text aligned to right with the button ?
edit: See other response, this one only tell how to add the HTML button, not the javascript of it.
<!-- OUR STORES Section -->
<section id="stores" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Stores</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#storeModal1" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store01.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 01</h4>
<p class="text-muted">Location 01</p>
</div>
</div>
<div class="col-md-4 col-sm-6 store-item">
<a href="#storeModal2" class="store-link" data-toggle="modal">
<div class="store-hover">
<div class="store-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/store/store02.png" class="img-responsive" alt="">
</a>
<div class="store-caption">
<h4>Store 02</h4>
<p class="text-muted">Location 02</p>
</div>
</div>
</div>
<!-- HERE -->
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-primary">View All</button>
</div>
</div>
</div>
</section>
If you don't want to load them asynchronously (resp. you have them in HTML file already) you can wrap them into div, which is set as a hidden in css display:none
Then you need Javascript and create event which handles DOM interaction on click.
I made a little sample for you with CSS and jQuery (Javascript Framework):
https://jsfiddle.net/ta53jfwo/
I hope it helps!