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
Related
I have following:
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
This is view with screen size >992:
This is view with screen <992:
How can I display elements below each other as is viewed in image2 ? I do not know why, but "display:block" is not working.
You can use
<div class="row">
to create separate rows of content satisfying your needs.
I recommend to read about grid system in this article:
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
</div>
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
In bootstrap 5 there is an option named order. So in your question, You can add a class named order-md-2 to things that you want to shift down and order-md-1 to things that you want to shift up.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
Hope my answer helps you
you could simply use the flex-direction of the flexbox.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div class='contacts'>
<div class='mail'>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div class='phone'>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
</div>
Inside CSS:
.contacts {
display: flex;
flex-direction: column;
}
This should allow you to orient both of your div-containers to be underneath each other.
I wanted to change the default theme of Asp.net.I changed it but now the problem is whenever i click on the login button or register button on the navbar it shows on the home page instead of showing it on a different page.I tired figuring out where the problem was coming from here's what i gathered so far
<!--This Is Causing That Problem-->
<Section id="TextHeader">
<div class="container px-0">
<div class="row">
<div class="col-lg-12" id="special">
<h1 class="text-center text-white">Content</h1>
<h5>Content</h5>
<a type="button" class="btn btn-danger rounded-pill" href="About us.html">Get Started</a>
</div>
</div>
</div>
</Section>
<Section id="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" id="hulky">
<h3 class="text-center">Why Us</h3>
<hr>
<p class="text-center">
content
</p>
Get Started
</div>
</div>
</div>
</Section>
<section id="Middle">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="text-center">Content</h3>
<hr>
</div>
</div>
</div>
</section>
<section id="unamed">
<DIV class="container-fluid px-0">
<div class="row">
<div class="col-lg-6">
<img src="Teacher.jpg" alt="" class="img-fluid d-none d-lg-block">
</div>
<div class="col-lg-6">
<h4>Content</h4>
<p id="teacher">Content</p>
</div>
</div>
</DIV>
</section>
<section id="Students">
<DIV class="container-fluid px-0">
<div class="row">
<div class="col-lg-6">
<img src="Student.jpg" alt="" class="img-fluid d-none d-lg-block">
</div>
<div class="col-lg-6">
<h1>Content>
</div>
</div>
</DIV>
</section>
this code has something that is causing the problem and this is default bootstrap code so its very tough to know what is causing the problem
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
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>