Site not showing mobile layout when accessed from my phone (Bootstrap 3) - html

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>

Related

Stretch image to div using Bootstrap

I want to stretch images in a carousel the entire width and height of the div that contains the carousel. However, the images are currently not occupying 100% width of the div, and the height is smaller or larger than the div. I am using Bootstrap 4.3.1. My code excerpt is shown below. Entire code is in this JS Fiddle page.
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card" style="height: 350px;">
<div id="photoCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="d-block img-fluid">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->

Your card <div>s still have their default padding,
Change all the <div class="col-sm-4 card" ...> to <div class="col-sm-4 card p-0" ....>.
or change the appropriate classes to include padding: 0;

With some CSS the object-fit and object-position of the images, and adding some other bootstrap utility classes, I am able to make your images take up 100% height and width of your carousel container. Is this what you are looking for?
.carousel-item img {
object-fit: cover;
object-position: center center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Page title</h1>
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card p-0" style="height: 350px;">
<div id="photoCarousel" class="carousel h-100 slide" data-ride="carousel">
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<div class="carousel-item h-100">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="position-absolute t-0 l-0 w-100 h-100">
</div>
<div class="carousel-item h-100">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Horizontal align inside col using many tag Bootstrap4

I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- 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]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>

Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>

Changing color of active col

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;
}

Bootstrap 3 Modal & Dropdown Not Working

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>

Bootstrap responsive list positioning

I'm building a site with the latest Twitter Bootstrap using the responsive features.
My problem is that I have two lists that appear side by side, but when the viewport width is less than 768px wide they appear stacked despite there being enough space for both of them to fit. How can I fix this?
Also, a couple of minor things: In the footer I have a strange A symbol appearing before the copyright symbol...how do I sort this out? Also, in IE two elements don't appear inline like they do on all other browsers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><strong>HOME</strong></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><strong>GALLERY</strong></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><strong>ABOUT US</strong></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><strong>CONTACT</strong></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
The CSS is here: http://gw.gd/Ooky
Thanks in advance.

As #Omega noted, the stacking of columns <768px is the default Bootstrap behaviour. You can override this with some custom CSS though. Here's a post with a similar question: Stack elements in twitter bootstrap media grid differently
Regarding the strange symbol in your footer, start by checking that your header includes:
<meta charset="UTF-8">
Good luck!