I am trying to learn Bootstrap in particular Bootstrap 4 but struggling with my footer.
It has 2 rows and i want the entire thing centered but struggling.
Below is my HTML i currently have
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-4 col-md-1 px-0">
<span class="h5">Follow us:</span>
</div>
<div class="offset-1 col-10 offset-md-0 col-md-3 px-0">
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-2">
Terms and conditions
</div>
<div class="col-12 col-md-2">
Privacy policy
</div>
<div class="col-12 col-md-1">
Careers
</div>
</div>
</div>
</footer>
Which turns out looking like the below on desktop but all parts over the place and i have been trying for hours to sort it
And mobile looks likes fine though
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-12 col-md-12 text-center">
<span class="h5">Follow us:</span>
Link1
Link2
Link3
Link4
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-lg-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-4">
Terms and conditions
</div>
<div class="col-lg-4">
Privacy policy
</div>
<div class="col-lg-4">
Careers
</div>
</div>
</div>
</footer>
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 have created this table with divs. This is how it is displayed on the screen:
<div class="row my-2">
<div class="col-lg-2">
<strong>Source</strong>
</div>
<div class="col-lg-2">
<strong>Target Language</strong>
</div>
<div class="col-lg-2">
<strong> Price per word</strong>
</div>
<div class="col-lg-2">
<strong>Total words</strong>
</div>
<div class="col-lg-2">
<strong>Total per language</strong>
</div>
<div class="col-lg-2">
<strong>Total Price</strong>
</div>
</div>
And this for entries in tables:
<div class="row my-2">
<div class="col-lg-2 mx-auto my-auto">
script.txt (English)
</div>
<div class="col-lg-2 mx-auto">
<div class="row mx-auto">
German
</div>
<div class="row mx-auto">
Chineese
</div>
<div class="row mx-auto">
French
</div>
</div>
<div class="col-lg-2">
<div class="row mx-auto">
$0.04
</div>
<div class="row mx-auto">
$0.05
</div>
<div class="row mx-auto">
$0.04
</div>
</div>
<div class="col-lg-2 mx-auto my-auto">
× 1245
</div>
</div>
I am getting this on large screen, but not on mobile view.
What can be done to get this same table on mobile view.
I want to create this layout. I tried making 2 and 4 div duplicate and showing them on mobile and displaying on desktop and opposite.
This code is working as I expected. But I want to know that is it possible to make it without duplicating the content.
<div class="row">
<div class="col-md-2 col-12">
<img src="http://via.placeholder.com/106x106">
<div class="show-mobile">
<div>content2</div>
<div>content4</div>
</div>
</div>
<div class="col-md-8 col-12">
<div class="show-desktop">
content2
</div>
<div>
content 3
</div>
</div>
<div class="col-md-2 col-12">
<div class="show-desktop">
content 4
</div>
<div>
content 5
</div>
</div>
</div>
This might be a not a perfect solution but visually looks close enough
<div class="container">
<div class="row">
<div class="col-4 col-md-2">
<img src="http://via.placeholder.com/106x106">
</div>
<div class="col-8 col-md-8 bg-light border">
2
</div>
<div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
3
</div>
<div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
4
</div>
<div class="col-12 col-md-2 order-3 bg-light border">
5
</div>
</div>
</div>
I have Facebook and Instagram links in 1 container, and another footer container for my footer.
I've checked all divs are closed, why does the links(href) also work on my footer? I'm new at coding so do correct me if any of the codes here are wrong!
This are the html codes (using bootstrap 4):
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-7"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-2">
<a href="https://www.facebook.com/"><img src="svg/facebook.svg" style="max-width:37px;">
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-2">
<a href="https://www.instagram.com/"><img src="svg/instagram.svg" style="max-width:37px;">
</div>
<div class="col-lg-2 col-md-3 col-sm-4"></div>
</div>
</div>
<footer class="footer">
<div class="container col-12">
<span class="footer">© 2019 xxx Pte Ltd All Rights Reserved.</span>
</div>
</footer>
My footer should not have the links(href)!
You have forgotten the closing </a> tag:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-7"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-2">
<img src="svg/facebook.svg" style="max-width:37px;">
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-2">
<img src="svg/instagram.svg" style="max-width:37px;">
</div>
<div class="col-lg-2 col-md-3 col-sm-4"></div>
</div>
</div>
<footer class="footer">
<div class="container col-12">
<span class="footer">© 2019 xxx Pte Ltd All Rights Reserved.</span>
</div>
</footer>
I have a problem that the order-[num] is not working because of the left and right side in different col's
Screenshot of view
<section class="row justify-content-center">
<div class="col-md-11">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-12 mb-3 order-0">
order small 1
</div>
<div class="col-12 mb-3 order-2">
order small 3
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-12 mb-3 order-1">
Ordering as small 2
</div>
<div class="col-lg-6 mb-3 order-3">
ordering as small 4
</div>
<div class="col-lg-6 mb-3 order-4">
ordering as small 5
</div>
</div>
</div>
</div>
</div>
</section>
if I placed all col's in one row it created a big white space of the height of place 2
I can only think of a solution which duplicates the section 3, puts its copy between 2 and the row of 4 and 5, and show/hide section 3 and its copy based on the break point.
HTML
<div class="container">
<div class="row">
<div class="col-md-5">
<section class="mb-3">
1
</section>
<section class="mb-3 d-none d-md-block">
3
</section>
</div>
<div class="col-md-7">
<section class="mb-3">
2
</section>
<section class="mb-3 d-md-none">
copy of 3
</section>
<div class="row">
<div class="col">
<section class="mb-3">
4
</section>
</div>
<div class="col">
<section class="mb-3">
5
</section>
</div>
</div>
</div>
</div>
</div>
Result
On large screens:
On small screens:
fiddle: http://jsfiddle.net/59x0s17k/1/