I'm new to coding with Bootstrap 3, I've been developing the homepage below, however my Dropdown menu in the navbar and my modals on the homepage have stopped working.
My other page also has a modal which does work, so I'm not sure as to what the difference is.
Can anyone help?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spark Media Arts</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Spark Media Arts</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">PORTFOLIO<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Graphic Design</li>
<li class="divider"></li>
<li>Video Production</li>
</ul></li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Spark Media Arts</h1>
<p>"Inspiring Creativity through Media ..."</p>
Book A Workshop
How To Hire Us
</div>
<div class="row">
<div class="col-sm-4">
<img src="img/thumbs/gdshow.jpg" alt="Graphic Design Showreel">
<h3>Graphic Design Showreel</h3>
<p>Year of production: 2014<br>
Running Time: 1:35 min<br>
Produced for: Spark Media Arts<br>
<br>Over the course of our first year, we've had the opportunity to produce artwork for various and some of their work and events.</p>
Read More
</div>
<div class="col-sm-4">
<img src="img/thumbs/vpshow.jpg" alt="Video Production Showreel">
<h3>Video Production Showreel</h3>
<p>Year of production: 2014<br>
Running Time: 3:09 min<br>
Produced for: Spark Media Arts<br>
<br>Over the course of our first year, we've had the opportunity to produce videos for various and some of their work and events.</p>
Read More
</div>
<div class="col-sm-4">
<img src="img/thumbs/sppromo.jpg" alt="SP Project Promo 2014">
<h3>SP Project Promo 2014</h3>
<p>Year of production: 2014<br>
Running Time: 2:37 min<br>
Produced for: SP Project<br>
<br>Promotional Video for SP Project, an organisation working across the North East region in the UK.</p>
Read More
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2014 Spark Media Arts.</p>
</div>
<div class="navbar-text pull-right">
<p>Get in touch:
<img src="img/social_icons/email.png">
<img src="img/social_icons/facebook.png">
<img src="img/social_icons/google-plus.png">
<img src="img/social_icons/twitter.png">
<img src="img/social_icons/vimeo.png">
<img src="img/social_icons/youtube.png">
</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form">
<div class="modal-header">
<h4>Contact</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact-name" placeholder="First and Last Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact-email" placeholder="example#domain.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4">
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="book_workshop" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Book A Workshop</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Related
I'm trying to add a modal when the user clicks on the 'Add' button under 'Categories.' When I use just the code for the modal in js fiddle, it works, but when I add all of the code from the current file, it doesn't. Have tried moving jquery cdn around and also making a separate div container for the modal, but not able to get it. Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
New Orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
data-toggle="modal"
data-target="#exampleModal"
class="btn btn-primary"
>Add</a
>
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
Add
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
Add
Manage
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="row">
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The code that you useis only available for Bootstrap 4, but in the header, you are including the Bootstrap 5 that have changed some parameters regarding modals :
To trigger a modal:
// OLD WAY
data-toggle="modal"
data-target="#exampleModal"
// NEW WAY
data-bs-toggle="modal"
data-bs-target="#exampleModal"
Declaring a modal :
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
New Orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Add</a
>
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
Add
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
Add
Manage
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You are probably getting your bootstrap versions mixed up. I have tested your code using bootstrap 4 and bootstrap 5 and can confirm it works on bootstrap 4 but does not on bootstrap 5, you can fix your code easily by replacing your bootstrap 5 script imports with bootstrap 4, or you can port your code to bootstrap 5.
Bootstrap 5 recently changed the way modals are triggered, which is why it does not work on 5 but does work on 4.
The following head works for me
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
I am trying to remove the color of the column border after you have clicked on the image (screenshot). I have been looking through the whole code and been trying to change the colors but am not sure what to change in order to remove the border color. Please advise.
body{font-family:'Roboto',sans-serif;overflow-x:hidden}
#portfolio .portfolio-item{margin:0 0 15px;right:0}
#portfolio .portfolio-item .portfolio-link{display:block;position:relative;max-width:400px;margin:0 auto}
#portfolio .portfolio-item .portfolio-link .caption{background:rgba(255,204,204,.7);position:absolute;width:100%;height:100%;opacity:0;transition:all ease .5s;-webkit-transition:all ease .5s;-moz-transition:all ease .5s}
#portfolio .portfolio-item .portfolio-link .caption:hover{opacity:1}
#portfolio .portfolio-item .portfolio-link .caption .caption-content{position:absolute;width:100%;height:20px;font-size:20px;text-align:center;top:50%;margin-top:-12px;color:#FC9F9F}
.btn-social,.scroll-top,.scroll-top .btn{width:50px;height:50px}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i{margin-top:-12px}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,#portfolio .portfolio-item .portfolio-link .caption .caption-content h4{margin:0}
#portfolio *{z-index:2}
#media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}}
.floating-label-form-group{position:relative;margin-bottom:0;padding-bottom:.5em;border-bottom:1px solid #eee}
.floating-label-form-group input,.floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none}.floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}.
floating-label-form-group:not(:first-child){padding-left:14px;border-left:1px solid #eee}
.floating-label-form-group-with-value label{top:0;opacity:1}.floating-label-form-group-with-focus label{color:#FC9F9F}
form .row:first-child .floating-label-form-group{border-top:1px solid #eee}
.btn-outline{color:#FC9F9F;font-size:20px;border:2px solid #FC9F9F;background:0 0;transition:all .3s ease-in-out;margin-top:15px}
.btn-outline.active,.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#FC9F9F;background:#fff;border:2px solid #fff}
.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.open .dropdown-toggle.btn-primary,.open .dropdown-toggle.btn-success{background-image:none}
.btn-primary{color:#FC9F9F;background-color:#FC9F9F;border-color:#FC9F9F;font-weight:700}
.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#FC9F9F;border-color:#FC9F9F}
.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled]
.btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#FC9F9F;border-color:#FC9F9F}
.btn-primary .badge{color:#FC9F9F;background-color:#FC9F9F}.btn-success{color:#FC9F9F;background-color:#FC9F9F;border-color:#FC9F9F;font-weight:700}
.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.open .dropdown-toggle.btn-success{color:#fff;background-color:#FC9F9F;border-color:#FC9F9F}
.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled]
.btn-success:hover{background-color:#FC9F9F;border-color:#FC9F9F}.btn-success .badge{color:#FC9F9F;background-color:#fff}
.btn-social{display:inline-block;border:2px solid #FC9F9F;border-radius:100%;text-align:center;font-size:20px;line-height:45px}
.btn.active,.btn:active,.btn:focus{outline:0}.scroll-top{position:fixed;right:2%;bottom:2%;z-index:1049}
.scroll-top .btn{font-size:20px;border-radius:100%;line-height:28px}.scroll-top .btn:focus{outline:0}
.portfolio-modal .modal-content{border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:none;min-height:100%;padding:100px 0;text-align:center}
.portfolio-modal .modal-content h2{margin:0;font-size:3em}.portfolio-modal .modal-content img{margin-bottom:30px}.portfolio-modal .modal-content .item-details{margin:30px 0}
.portfolio-modal .close-modal{position:absolute;width:75px;height:75px;background-color:transparent;top:25px;right:25px;cursor:pointer}
.portfolio-modal .close-modal:hover{opacity:.3}
.portfolio-modal .close-modal .lr{height:75px;width:1px;margin-left:35px;background-color:#FC9F9F;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);z-index:1051}
.portfolio-modal .close-modal .lr .rl{height:75px;width:1px;background-color:#FC9F9F;transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);z-index:1052}
.portfolio-modal .modal-backdrop{opacity:0;display:none}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>J</title>
<!-- Bootstrap Core CSS -->
<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/freelancer.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
</head>
<body>
<header>
<div class="container navbar-container navbar-fixed-top" role="navigation">
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://"><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left active"><a href="http://www.> PORTFOLIO </a></li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<style>
.row {
background: #ffffff;
padding: 0px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #4a4a4a;
}
#media (min-width:468px) and (max-width:690px){
.content {
font-size: 14px;
}
</style>
<!-- Portfolio Grid Section -->
<br>
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h4></h4>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
</div>
</div>
</section>
<!---End Contet-->
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h4 style=" font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #4a4a4a;">LOGOS</h4>
<hr class="star-primary">
<img src="img/logos.png" class="img-responsive img-centered" alt="">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/circus.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/game.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/safe.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/submarine.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span>Copyright © 2017. . All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/freelancer.min.js"></script>
</body>
</html>
Set outline:none on focus
.portfolio-link:focus {
outline: none;
}
I tried to make a popup window with bootstrap. I modified some codes from a template. It should have 3 columns. 1st column picture, 2nd column text and 3rd column is price and button+icon. This is going to be a list with several similar rows. Here I just put one row to make simple. The footer is going to be some text. The problem is I can't get the 3rd column to the right position. I tried with clearfix, etc. Any suggestions?
Please note that, these codes have several unsolved issue. Please ignore those things. That's not the first priority. Tks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="col-lg-3 col-md-4 col-xs-4 ">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div "col-lg-3 col-md-4 col-xs-4 clearfix">
<p >Product Title</p>
<p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
you have to add a 'row' , and forgot a 'class=' , and you can remove the clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-4 ">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix">
<p >Product Title</p>
<p class="text-warning"><small>Description.dfdasf jsadfdasld fdslafjlsadf sldfjsdljf</small></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Mainly it's number 1 below, but here are a couple other things to consider:
You left out the keyword class in the markup for the second column. This is pretty important.
You don't really need the clearfix class. If you wrap the whole thing in a row div then it will do the line breaking for you pretty well.
The columns should always add up to 12 - when you have three col-lg-3s you'll end up with something that is left-aligned and only takes up 3/4ths of the modal.
The columns for the smaller screen sizes will get bumped up to the next ones, so col-xs-4 col-sm-4 col-md-4 col-lg-3 is the same as saying col-xs-4 col-lg-3. The less CSS rules that need to be applied for the same result the better.
In your example you have a really long word in the description, which causes it to overflow into the next column. You might want to account for that situation by playing around with things like word-wrap and text-overflow.
$(document).ready(function() {
$("#myModal").modal('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-xs-4">
<p>Product Title
</p>
<p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small>
</p>
</div>
<div class="col-xs-4">
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Can someone tell why my webpage's components are overlapped when the browser is resized? and How to fix it? I noticed that if I replace the aboutContainer and the bottomContainer with the two copies of the topContainer, the problem does not occur. So I only know that there is something wrong with the two containers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example 2</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.navbar-brand{
font-size:1.7em;
}
#topContainer{
background-image:url("image/background2.jpg");
width:100%;
background-size:cover;
color:white;
}
.box{
background-color:#F1F1F1;
border:1px solid grey;
}
#topRow{
margin-top:150px;
text-align:center;
}
#topRow h1{
font-size:350%;
}
.bold{
font-weight:bold;
}
.marginTop{
margin-top:30px;
}
.center{
text-align:center;
}
.buttonBorder{
border:1px solid #F8F8F8;
}
.title{
margin-top:30px;
font-size:350%;
}
.image-size{
margin:20px;
width:300px;
height:250px;
}
#bottomContainer{
background-color:#B19CE3;
width:100%;
}
.logo{
height:100px;
}
#myModal{
margin-top:100px;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">The way of GO</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>About</li>
<li>Playing Go</li>
<li>Donate</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<label>Username</label>
<input type="email" placeholder="email..." class="form-control"
name="username"></input>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="password..." class="form-control"
name="password"></input>
</div>
<div class="form-group">
<button type="submit"class="btn btn-success">Log In</input>
</div>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="topContainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="topRow">
<h1>So, what is GO?</h1>
<p class="lead ">Go is an ancient Chinese board game, in fact it's so ancient there is no other board game in the world
that we have found evidence of existing before go.</p>
<p class="bold marginTop">Interested? Subscribe now!</p>
<form class="marginTop">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" class="form-control"placeholder="your email..."></input>
</div>
<button class="btn btn-success btn-lg marginTop buttonBorder" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="aboutContainer">
<div class="row center">
<h1 class="center title">Why GO is Awesome</h1>
<p class="lead">Summary of Go's history and awesomeness</p>
</div>
<div class="row center">
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> History</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic1.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> How-to-play</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic2.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> Books</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic3.jpg" />
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="marginTop center">The way of GO</h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="email" placeholder="your email"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="password"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password"></input>
</div>
<button type="submit" class="btn btn-success">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container contentContainer" id="bottomContainer">
<div class="row center marginTop">
<h1 class="center title">Playing GO now!</h1>
<p class="lead center">Two most popular websites for go players</p>
</div>
<div class="row center marginTop">
<div class="col-md-6 center" >
<h1 class="title">KGS</h1>
<img class="marginTop logo" src="image/kgslogo.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
<div class="col-md-6 center">
<h1 class="title">Pandanet</h1>
<img class="marginTop logo" src="image/pandanet.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
</body>
</html>
It was because you were specifying the height of the containers.
http://plnkr.co/edit/lyDWUbFRJbHVVH0WYcyA
I commented out
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
and it doesn't overlap anymore. Simply wrapping that code in a resize handler will not work. You might wanna use margins or paddings instead. I haven't tested, though.
There were also quite a few other HTML errors that I fixed.
I recently built a website, I used bootstrap to make it responsive. Everything was working pretty smooth, when I shrank my browser it changed the layout as it was supposed to, so I thought that it was going to work the same way by the time I access it from my phone, but it turns out that I was wrong, when I access the site from my phone it displays the regular site, it doesn't render to use the mobile layout.
My code is just plain HTML and I'm using bootstrap 3, any suggestions?
Thanks in advanced.
<html lang="en">
<head>
<!--Seg:header-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script src="js/edison.js"></script>
<!-- Bootstrap -->
<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/edison.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span id="leftHeaderImg">
<img src="images/header.gif" />
</span>
<span class="header-right-block">
<div class="header-medium-text">"One call does it all"</div>
<div class="header-phone">800-875-9626</div>
<div class="header-small-text">we handle everything for the funeral<br />
business except caskets and vaults</div>
</span>
</div>
<!--top nav menu-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Menu</span>
</div><!--end of navbar-header-->
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li>Products</li>
<li>About</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
</nav><!--end of top nav menu-->
<!--Seg:carousel-->
<div class="col-sm-10">
<div id="this-carousel-id" class="carousel slide hidden-xs"><!-- class for animation -->
<div class="carousel-inner">
<div class="item active">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 1</p>
</div>
</div>
<div class="item">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 2</p>
</div>
</div>
<div class="item">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 3</p>
</div>
</div>
<div class="item">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 4</p>
</div>
</div>
</div><!-- end of carousel-inner -->
<!-- Next and Previous controls -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- end of carousel -->
</div><!--end of col-sm-10 -->
<!--End:carousel-->
<!--Seg:content-->
<div class="row">
<div class="col-sm-3">
<!--sidebar nav menu-->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Categories</span>
</div><!--end of navbar-header-->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li>Acknoledgement Cards</li><!--class="active"-->
<li>Air Trays</li>
<li>Body Bags</li>
<li>Chapel Equipment</li>
<li>Flower Handling</li>
<li>Funeral Garments</li>
<li>Jewish Service Needs</li>
<li>OSHA</li>
<li>Preparation Room</li>
<li>Rosary Beads</li>
<li>Urns</li>
</ul>
</div><!--end of nav-collapse-->
</div>
</div><!--end of sidebar nav menu-->
</div><!-- end of col-sm-3 -->
<!--content-->
<div class="col-sm-9">
<div class="row">
<div class="text"><strong>Best Sellers:</strong></div>
<div class="col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-6 post">
<img src="images/thumbnail.png" alt="" />
<h2>Item</h2>
<p>Dummy Text! Dummy Text! Dummy Text! Dummy Text!
Dummy Text! Dummy Text! </p>
<span class="btn btn-default">Details</span>
</div>
<div class="col-md-3 col-sm-6 post">
<img src="images/thumbnail.png" alt="" />
<h2>Item 2</h2>
<p>Dummy Text! Dummy Text! Dummy Text! Dummy Text!
Dummy Text! Dummy Text! </p>
<span class="btn btn-default">Details</span>
</div>
</div>
</div><!-- end of col-xs-12-->
</div>
</div><!--end of col-sm-9-->
</div> <!-- end of row-->
<!--End:content-->
<!--Seg:footer-->
<footer class="row footer">
<div class="container">
<div class="panel-footer">
<p>Copyright © 2014<br />
Site design: <br />
Return Policy<br />
Privacy Policy
</p>
</div><!--end of panel-footer-->
</div>
</footer>
<!--End:footer-->
<!--Seg:closePage-->
</div><!--end of container-->
<!--End:closePage-->
</body>
</html>