Issue with div closing, it's href is spilling to other content - html

I have a site I'm making and there's a div from my nav bar that seems to be spilling out.
If I hover anywhere but the header and footer it's as though I'm hovering over a link. Can't seem to see what the issue is.It appears to be from my login button as that's the href shown when hovering over the content but I've gone through my code and can't see an un-closed div.
Would really appreciate some help with this one, it's wrecking my head.
Here's my Fiddle Images are placeholders in lieu of my ones but are the same size approx.
<body>
<div class="page-wrap">
<header class="topbar topbar-grey">
<div class="topbar-left">
<div class="topbar-logo">
<a href="/">
<img class="mysite-logo" src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg" alt="Mysite Logo" />
</a>
</div>
</div>
<nav class="topbar-nav">
<ul class="topbar-nav-main">
<li id="home-nav">Home</li>
<li id="about-nav">About</li>
<li id="contact-nav">Contact</li>
<li id="gallery-nav">Gallery</li>
<li id="comissions-nav">Comissions</li>
</ul>
<div class="topbar-right">
<div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger2"><a href="login.html">Login</div>
</div>
</nav>
</header>
<div class="contentstuff">
<div class="col col1">
<div class="box1">
<div id="box-image">
</div>
</div>
<div class="box3">
<div id="box-image2">
</div>
</div>
</div>
<div class="col col2">
<div class="box2">
<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked"/>
<label for="button-1"></label>
<input type="radio" id="button-2" name="controls"/>
<label for="button-2"></label>
<input type="radio" id="button-3" name="controls"/>
<label for="button-3"></label>
<input type="radio" id="button-4" name="controls"/>
<label for="button-4"></label>
<input type="radio" id="button-5" name="controls"/>
<label for="button-5"></label>
<input type="radio" id="button-6" name="controls"/>
<label for="button-6"></label>
<input type="radio" id="button-7" name="controls"/>
<label for="button-7"></label>
<input type="radio" id="button-8" name="controls"/>
<label for="button-8"></label>
<input type="radio" id="button-9" name="controls"/>
<label for="button-9"></label>
<input type="radio" id="button-10" name="controls"/>
<label for="button-10"></label>
<div id="slideshow-inner">
<ul>
<li id="slide1">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide2">
</li>
<li id="slide3">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide4">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide5">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide6">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide7">
</li>
<li id="slide8">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide9">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
<li id="slide10">
<img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />
</li>
</ul>
</div>
</div>
</div>
<div class="box4">
<div id="box-image3">
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="row-1">
<div class="logofooter">
<a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg"></a>
<div class="brand">
MySiteLogo
</div>
</div>
<ul class="legal">
<li>Privacy Policy</li>
<li>Legal</li>
<li>Disclaimer</li>
<li>Contact</li>
</ul>
<div class="social">
<ul class="socicons">
<li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"></a></li>
<li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
<li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>


You forgot to close the <a> tag:
<div class="hamburger2"><a href="login.html">Login</div>


Its not a </div> You are missing the closing </a> tag for your Login link.
<div class="topbar-right">
<div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
<div class="hamburger2"><a href="login.html">Login</div>
</div>

Related

How to create a two column layout form?

Am I missing something here? Or is this not the right way to go about it? Please help me, have a look at this and tell me what's wrong here
/*--- FORM ----*/
.form-container {
width: 100%;
}
.form-container li {
display: block;
float: left;
width: 100%;
margin: 0 auto;
}
input,
select,
textarea {
width: 60%;
}
label {
text-align: left;
margin-left: 18px;
font-size: 100%;
}
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="first-name">First name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="first-name" id="first-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="last-name">Last name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="last-name" id="last-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="business-email">Business email:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="email" name="business-email" id="business-email" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="phone-number">Phone number:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="phone-number" id="phone-number" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="company-name">Company name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="company-name" id="company-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="cosize">Company size:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="cosize" id="cosize">
<option value="small" selected>1-100</option>
<option value="medium">101-2000</option>
<option value="large">2001+</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>How did you find us? :</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="find-us" id="find-us">
<option value="search" selected>Search engine</option>
<option value="friends">Friends</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>Tell us what you wnat here</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<textarea name="message"></textarea>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="submit" value="Send message">
</li>
</ul>
</div>
</div>
</form>
</div>
I have used the codes in my stylesheet to try and create a 2 column layout form, but it still doesn't work. Am i doing anything wrong here?
Am i missing something out, please help with this!

I've created a example for you using flexbox
I have removed your first row since you didn't need that and added css to the form and .row
/*--- FORM ----*/
.form-container {
width: 100%;
}
.form-container li {
display: block;
float: left;
width: 100%;
margin: 0 auto;
}
input,
select,
textarea {
width: 60%;
}
label {
text-align: left;
margin-left: 18px;
font-size: 100%;
}
form {
display: flex;
flex-wrap: wrap;
}
form .row {
width: 50%;
}
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="first-name">First name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="first-name" id="first-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="last-name">Last name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="last-name" id="last-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="business-email">Business email:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="email" name="business-email" id="business-email" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="phone-number">Phone number:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="phone-number" id="phone-number" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="company-name">Company name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="company-name" id="company-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="cosize">Company size:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="cosize" id="cosize">
<option value="small" selected>1-100</option>
<option value="medium">101-2000</option>
<option value="large">2001+</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>How did you find us? :</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="find-us" id="find-us">
<option value="search" selected>Search engine</option>
<option value="friends">Friends</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>Tell us what you wnat here</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<textarea name="message"></textarea>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="submit" value="Send message">
</li>
</ul>
</div>
</div>
</form>

How to keep border across divs in bootstrap

I have a box on the left and a big div i want to wrap them with a border with a light color. I want the borter to be of square shape. How can i do this. I have also added the style of the progress bar incase if it helps. I want a border box with shade around the progress bar circle. I am using bootstrap version 4
border pic
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>

I just add few CSS, I hope it'll help you out. Thanks
.light-border {
border: 1px solid #ccc;
}
and add light-border in <div class="row light-border">.
.light-border {
border: 1px solid #ccc;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row light-border">
<div class="col-md-3">
<span class="border">
<br><br><br>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</span>
</span>
<br><br>
<div class="list-group">
Home
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item justify-content-between">
Help <span class="badge badge-secondary badge-pill">14</span>
</div> Home <span class="badge badge-light badge-pill">14</span>
</div>
</div>
<div class="col-md-9">
<br><br><br><br><br><br> <br><br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="">Brief Information</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href=""> Work Experience </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="">Voluntary Work</a>
</li>
</ul>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">
File input
</label>
<input type="file" class="form-control-file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>

Col 6 Panels Alignment Issues

First experience with bootstrap. Want 2 panels next to each other using the col-lg-6 class. Left panel will be a link to an article while holding an image. Right will be a signup/login box.
When loading the site the 2 panel goes underneath?
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body"><img class="img-responsive" src="images/warning.png"</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
</div>
This is all inside a container.
Before adding img
After adding img

Please use this HTML
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">
<img class="img-responsive" src="images/warning.png"/>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>

Flexbox breaking on IE

I'm trying some layout stuff with flexbox, but in IE it never seems to work. I'm wondering what i'm doing wrong. I checked the bugs that are present with IE but I seem to be doing everything according to it.
<div class="main">
<div class="main-inner">
<div class="breadcrumb">
Beleza > Esponjas
</div>
<aside class="sidebar">
<h1 class="sidebar-heading">
Filtrar por
</h1>
<ul class="filter ul-reset">
<li class="filter-item">
<section class="filter-item-inner">
<h1 class="filter-item-inner-heading minus">
Cor
</h1>
<ul class="filter-attribute-list ul-reset">
<div class="filter-attribute-list-inner">
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-1" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-1" class="filter-attribute-label ib-m">
White
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-2" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-2" class="filter-attribute-label ib-m">
Lime
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-3" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-3" class="filter-attribute-label ib-m">
Biege
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-4" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-4" class="filter-attribute-label ib-m">
Khaki
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-5" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-5" class="filter-attribute-label ib-m">
Olive
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-6" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-6" class="filter-attribute-label ib-m">
Yellow
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-7" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-7" class="filter-attribute-label ib-m">
Gold
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-8" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-8" class="filter-attribute-label ib-m">
Sepia
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-9" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-9" class="filter-attribute-label ib-m">
Brown
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-10" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-10" class="filter-attribute-label ib-m">
Salmon
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-11" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-11" class="filter-attribute-label ib-m">
Coral
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-12" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-12" class="filter-attribute-label ib-m">
Red
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-13" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-13" class="filter-attribute-label ib-m">
Ruby
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-14" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-14" class="filter-attribute-label ib-m">
Plum
</label>
</li>
<li class="filter-attribute-item">
<input type="checkbox" id="colour-attribute-15" class="filter-attribute-checkbox ib-m">
<label for="colour-attribute-15" class="filter-attribute-label ib-m">
Violet
</label>
</li>
</div>
</ul>
</section>
</li>
</ul>
</aside>
<div class="product-grid">
<ul class="product-directive">
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/esponja.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cotton.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cloth.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/esponja.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cotton.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
<li class="grid-product-box">
<div class="item">
<div class="product">
<div class="picture">
<a href="#" class="product-image">
<img src="img/cloth.jpg">
</a>
</div>
<div class="star-ratings-sprite">
<span class="rating"></span>
</div>
<a href="#" class="product-title-link">
<h4 class="product-title">Esponja</h4>
</a>
<div class="product-price">
<span>2.00 €</span>
</div>
<div class="product-buttons">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
https://jsfiddle.net/y0yLnuw6/2/

HTML page won't switch to mobile version / not responsive

<body>
<nav class="navbar navbar transparent">
<div class="container-fluid logo">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right right font-top">
<li class="Buybtn-topright">
<button type="button" class="btn-link"> Buy now</button>
</li>
</ul>
</div>
</nav>
<div class="form" >
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="signup.php" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
Full Name<span class="req">*</span>
</label>
<input type="text" name="FuName" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
user name<span class="req">*</span>
</label>
<input type="text" name="username"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" name="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" name="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
c A Password<span class="req">*</span>
</label>
<input type="password" name="CPass" required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="signin.php" method="post" >
<div class="field-wrap">
<label>
username <span class="req">*</span>
</label>
<input name="username" id="username" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" name="password" id="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button type="submit" name="submit" value="Login "class="button button-block"/>Login</button>
</form>
</div>
</div> </div>
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- tab-content -->
</div>
</body>
</html>
I have the above code in html and when I look at in mobile version it looks like the desktop so it is not responsive. BUT what is making me confused is that for the FOOTER and HEADER I have the same exact code in the other pages and they are responsive? any suggestion?

Any chance you forgot to load Bootstrap CSS?

To enable responsiveness using twitter bootstrap, the <head> section of your HTML page should contain <meta name="viewport" content="width=device-width, initial-scale=1">.
As such, for a basic start up responsive twitter Bootstrap template, head over to the getting started twitter Bootstrap page.