Why does my footer also has links from another container? - html

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>

Related

Responsive list of divs in bootstraps

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.

Creating A Centered Footer Using Bootstrap 4

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>

bootstrap v3.3.2 - col-xs-* not displaying on small screens

With this code when the width of the container is less than 792px the content of the div with the class 'col-xs-6' disappear.
<div class="cont">
<div class="top">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
how can I display it?

add class name row to top class
<div class="cont">
<div class="top row">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>

How can I get 1 bootstrap column on larger screens to break to 2 on smaller screens and stacked on mobile?

Here is the html:
<div class="container-fluid">
<div class="row fluid">
<div class="nav clearfix">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="hotel">
<div class="hotel_img"></div>
<h1>Accomodation</h1>
<div class="bottom_border"></div>
<p>
Perfect solution:
<span>hotel, apartment, hostel, guest house</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="tour">
<div class="tour_img"></div>
<h1>Tourist Attractions</h1>
<div class="bottom_border"></div>
<p>
Search your favorite:
<span>restaurant, museum, hotel, attractions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="clearfix restaurant">
<div class="restaurant_img"></div>
<h1>Restaurants</h1>
<div class="bottom_border"></div>
<p>
You are hungry:
<span>chinese food, burgers, traditional foods</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="event">
<div class="event_img"></div>
<h1>Events & Tickets</h1>
<div class="bottom_border"></div>
<p>
It's time to have fun:
<span>concerts, cinema, exhibitions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="coffee">
<div class="coffee_img"></div>
<h1>Coffee Shop</h1>
<div class="bottom_border"></div>
<p>
You must wake up:
<span>Starbucks, Filicori, Nescafe, Lavazza</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="gov">
<div class="gov_img"></div>
<h1>Government</h1>
<div class="bottom_border"></div>
<p>
Must see:
<span>parliament building, district court, royal house</span>
</p>
</div>
</div>
</div>
</div>
It wont break, instead it just stays as 1 column and forces a scroll bar.
I want it to look like
1 2 3 4 5 6
1 2 3
4 5 6
and stacked on mobile. instead it stays 1 2 3 4 5 6 on any screen size. The code looks right to me, I'm not sure if something is stoping it from breaking or if I am just doing it wrong. Any ideas?

Make sure you are importing the Bootstrap library. Your code as pasted won't do anything without it.
For the small screens, use col-12 to get full width, and for the large screens, use col-6 to get half width (side by side columns).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="hotel">
<div class="hotel_img"></div>
<h1>Accomodation</h1>
<div class="bottom_border"></div>
<p>
Perfect solution:
<span>hotel, apartment, hostel, guest house</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="tour">
<div class="tour_img"></div>
<h1>Tourist Attractions</h1>
<div class="bottom_border"></div>
<p>
Search your favorite:
<span>restaurant, museum, hotel, attractions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="clearfix restaurant">
<div class="restaurant_img"></div>
<h1>Restaurants</h1>
<div class="bottom_border"></div>
<p>
You are hungry:
<span>chinese food, burgers, traditional foods</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="event">
<div class="event_img"></div>
<h1>Events & Tickets</h1>
<div class="bottom_border"></div>
<p>
It's time to have fun:
<span>concerts, cinema, exhibitions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="coffee">
<div class="coffee_img"></div>
<h1>Coffee Shop</h1>
<div class="bottom_border"></div>
<p>
You must wake up:
<span>Starbucks, Filicori, Nescafe, Lavazza</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="gov">
<div class="gov_img"></div>
<h1>Government</h1>
<div class="bottom_border"></div>
<p>
Must see:
<span>parliament building, district court, royal house</span>
</p>
</div>
</div>
</div>

bootstrap spaceing issue during display of multicolumn texts

I have the following code below, but i am having problem with the spacing. I am using bootstrap. How can i have the title and the value eg " Leonard Moonsoooon". be only 20 px away all the time ?
How can I reduce the spacing?
Senior Advisor Leonard Moonsoooon
Here is my code below and fiddle
FIDDLE
<div id="clientData">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-6 col-md-2OW">
<div class="name"><strong>Senior Advisor </strong></div>
<!--<div class="account"><strong> Prod </strong></div>
<!-- <div class="approved"><strong> Prod </strong></div>
<div class="activity"><strong> Last Activity </strong></div>
<div class="activity"rong> Risk Category</strong></div> -->
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<div class="name">Leonard Moonsoooon</div>
<!--<div class="account">0789</div>
<!--<div class="approved">12/5/2015</div>
<div class="activity">4/1/2016</div>
<div class="riskcategory">
<div style="background:Yellow; padding:2px;height:18px; width:50px;"></div>
</div>--->
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-2 col-sm-3 col-xs-6 col-md-2OW12 thirdrdcolTitle">
<div class="brokerage"><strong> Company </strong></div>
<!--<div class="approved"><strong> Max Approved Loan Amt </strong></div>
<div class="balance"><strong> Loan Balance </strong></div>
<div class="credit"><strong> Available Credit </strong></div>
<div class="aging"><strong> Days in this Category </strong></div> -->
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<div class="pledged "> YUMark</div>
<!--<div class="approved "> $2,050,877.82</div>
<div class="balance "> $1,849,000.00</div>
<div class="credit "> $201,877.82</div>
<div class="aging "> 3</div>-->
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-1 col-sm-1 col-xs-6">
<div class="account"><strong> Production </strong></div>
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<div class="pledged "> 2351</div>
</div>
</div>
</div>

You have some really funky html going on there. However, the easiest thing you can do is just place both values into one column div, instead of two.
.name strong{margin: 0 20px 0 0;}
<div class="col-md-4 col-sm-4 col-xs-12 col-md-2OW">
<div class="name"><strong>Senior Advisor</strong> Leonard Moonsoooon</div>
</div>
https://jsfiddle.net/pwku8qam/