I am learning front end developement using html, css.
I want to create a menubar and above menu bar i need to add an image ( header image).
Problem is I am not getting the image which is added to my images folder.
and this is the html code...
Kindly help me with the issue.
enter code here
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
color:green;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="/images/spmhead.jpg" scale="0" width="100%">
</a>
</div>
</nav>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Hello World Mentors </a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Hell</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
</div>
<br>
<div class="col-md-6">
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
</div>
<div class="container">
<div class="col-md-6">
<h2>Java</h2>
<marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>
</div>
<div class="col-md-6">
<marquee direction="up">This text will scroll from bottom to up</marquee>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<script src="js/jquery.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>
Refer the image tag with relative path .
<img src="./images/spmhead.jpg" scale="0" width="100%">
It must be <img src="images/spmhead.jpg" scale="0" width="100%">.
Finally, I got solution for the question I have posted above.
This is the code which worked for me.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
color:green;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a href="#">
<img src="images/spmhead.jpg" class="img-responsive">
</a>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Hello World Mentors </a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Hell</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
</div>
<br>
<div class="col-md-6">
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
</div>
<div class="container">
<div class="col-md-6">
<h2>Java</h2>
<marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>
</div>
<div class="col-md-6">
<marquee direction="up">This text will scroll from bottom to up</marquee>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<script src="js/jquery.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>
Related
I have an issue with my website where whitespaces render outside the HTML tag borders on mobile. The issue is on mobile only and the same thing happens when the mobile chrome browser is set to desktop mode on mobile.
Initial load mobile
This is how the website loads initially on mobile but the scroll is going way past the viewport of the HTML tags.
Zoomed out
The thing I don't understand is the website removes the whitespace if the client rotates from portrait to horizontal and back.
As I use the same static template on all webpages the issue persists throughout the whole website.
The website is: Zefir.codes
Website uses:
Animate (CSS Library)
Bulma (CSS Library)
Heres the template for the static webpages:
<html>
<head>
<title>A Hacker's world</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index-min.css">
<link rel="stylesheet" href="css/animate.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="section">
<div class="container">
<a href="index.html"> <h1 class="title animated pulse">
Zefir Repository <img src="img/logo.png" width="150px" height="150px" align="right">
</h1>
<p class="subtitle animated bounceInRight">
A <strong>Hacker's</strong> World
</p>
</a>
</div>
</section>
<br/>
<div class="container is-widescreen">
<div class="tabs is-small animated lightSpeedIn">
<ul>
<li>Tutorials</li>
<li>Projects</li>
<li>About me</li>
</ul>
</div>
</div>
<br/>
<!--Page Content-->
<div class="animated zoomIn">
<div class="container is-fluid">
<!--Column start-->
<div class="columns">
<!--first Column-->
<div class="column is-one-quarter">
</br>
<p class="title">
Updates
</p>
<!--Notify03-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
A rebirth of the website!
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">
The website is coming back and strong!
<br>
<time datetime="2020-05-15">22:04 - 15 May 2020</time>
</div>
</div>
</div>
</div>
<!--second Column-->
<div class="column">
</br>
<p class="title">
News
</p>
<div class="card">
<header class="card-header">
<p class="card-header-title">No News
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">...
<br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time>
</div>
</div>
</div> <div class="card">
<header class="card-header">
<p class="card-header-title">No news </p>
</header>
<div class="card-content"> <div class="content">... <br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time> </div> </div></div>
</div>
</div>
</div>
<!--End of Content-->
</br>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Zefir Repository is a collection of projects and tutorials by <strong>Jan Andersson</strong> Hosted on <strong>Infinityfree</strong>.
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
It does this because your elements are positioned way to the right before the animation starts and the browser keeps this whitespace.
Either change your animation or a simple fix is to add:
body {
overflow-x: hidden;
}
add overflow-hidden to the body of your website hope this solves your issue.
My school offers a free website space for each student. I created a website with the following structure
- index.html
- main-site/
- css/
- bootstrap.css
- style.css
- img/
- js/
- help-docs/
- template/
When I visit the site on my home machine, everything loads fine and the css is applied to the pages.
I then upload the folder to the root of my website for the school. I replace the default index.html with mine and place the folders in the same structure as before. But the problem is that when I open the page from the new endpoint, the css is not applied. None of the images are loaded and the website just looks bare.
I've tried changing the permissions of the folders and files to make them accessible but this does not seem to work. I even changed everything to 777 and it does not make a difference.
I got one of my friends to try my website on his page and everything seems to be working well for him. So at this point I'm not sure what the problem is.
I should also add that the webserver is apache
So far, in my .htaccess file, I have the following:
DirectoryIndex website.html
I have also changed index.html to website.html and now accessing the website by using website.html rather than index.html still works fine apart from the inability to load css or js files.
Is this something that can be solved using a .htaccess file? If so, what could I add to it to make this work? Other solutions are welcome, although it should be noted that I do not have root access
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Light Wave Template | DesignBootstrap</title>
<!-- BOOTSTRAP CORE CSS -->
<link href="main-site/css/bootstrap.css" rel="stylesheet" />
<!-- CUSTOM CSS -->
<link href="main-site/css/style.css" rel="stylesheet" />
<!-- HTML5 Shiv 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/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]-->
</head>
<body>
<!-- HEADER SECTION START-->
<section id="header">
<div class="container">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
<h1>Light Wave Template </h1>
<p>
<strong>6 Style </strong> Versions
</p>
<h4>Click on the image to see demos</h4>
</div>
</div>
</div>
</section>
<!-- HEADER SECTION END-->
<!-- PREVIEW SECTION START-->
<section id="preview">
<div class="container">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 ">
<h1>SEE DEMOS</h1>
<h3> See Document</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/blue.html" target="_blank">
<img src="main-site/img/previews/1.png" class="img-responsive" alt="" />
<hr />
<p>
Blue Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/green.html" target="_blank">
<img src="main-site/img/previews/2.png" class="img-responsive" alt="" />
<hr />
<p>
Green Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/red.html" target="_blank">
<img src="main-site/img/previews/3.png" class="img-responsive" alt="" />
<hr />
<p>
Red Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/yellow.html" target="_blank">
<img src="main-site/img/previews/4.png" class="img-responsive" alt="" />
<hr />
<p>
Yellow Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-black.html" target="_blank">
<img src="main-site/img/previews/5.png" class="img-responsive" alt="" />
<hr />
<p>
Black Background Version ( With solid background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-red.html" target="_blank">
<img src="main-site/img/previews/6.png" class="img-responsive" alt="" />
<hr />
<p>
Green Background Version ( With solid background )
</p>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- PREVIEW SECTION END-->
<!-- YES SECTION START-->
<section id="yes">
<div class="overlay">
<div class="container">
<div class="row text-center">
<div class="col-lg-12 col-md-12">
<span class="text-yes">Yes , You heard right !
<br />
its'free and with documentation</span>
</div>
</div>
</div>
</div>
</section>
<!-- YES SECTION END-->
<!-- BOTTOM SECTION START-->
<section id="bottom">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h3>Want Some More ?</h3>
<h4>EXPLORE : DesignBootstrap.com</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 ">
</div>
</div>
</div>
</section>
<!-- BOTTOM SECTION END-->
<!-- FOOTER SECTION START-->
<footer>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
© 2015 DesignBootstrap.com
</div>
</div>
</div>
</footer>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY SCRIPTS -->
<script src="main-site/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="main-site/js/bootstrap.js"></script>
</body>
</html>
Try creating a new directory outside of main-site and moving the files to that directory. This may fix the problem that you are experiencing.
Sounds like there may be a problem with file or directory ownership, but without being able to see it, I'm not exactly sure.
In addition to Brandon's answer, I found that the actual issue was that the directories I had copied over did not have the right permissions associated with them. After creating a temporary directory, I noticed that the folder had the permission 755
ls -ld tempdir
drwxr-xr-x 2 aaa111 student 4096 Feb 21 18:34 tempdir
Whereas the other folders had only permission 700
To fix, this I ran this command:
find main-site template help-docs -type d | xargs chmod 755
And now everything works well
I am trying to fit mo website logo image inside a jumbotron. But somehow it just does not fits there. I have attached the output as an image. Here is the output:
http://imgur.com/8ETxyjg
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The DreamShream Quiz has the best and most updated quiz questions on various categories. Visit now!" />
<meta name="keywords" content="general knowledge, quiz, quiz website, online quiz, politics quiz, programming quiz, general knowledge quiz, gk quiz, history quiz, general knowledge questions" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" />
<title>Welcome to Best Quiz Questions Website</title>
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse">
<div class="pull-right">
<button type="button" class="btn btn-success">
Login
</button>
<button type="button" class="btn btn-success">
Sign Up
</button>
</div>
</div>
<div class="jumbotron">
<div class="pull-left">
<img class="img img-responsive" src="images/logo.png" />
</div>
<div class="pull-right">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive -->
<ins class="adsbygoogle responsive"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="6352682258"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="navbar navbar-default">
<div class="navbar-text pull-left">
<ul class="nav nav-tabs">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Privacy policy</li>
<li>Sitemap</li>
<li>Blog</li>
</ul>
</div>
</div>
Also, the adsense ad is not showing up on this page, although it is showing on pages that I have not yet started implementing in Bootstrap.
I am sorry for too many question in one question, but they are all much inter-related. Previously I was trying to use the image and the ad between the two navbar without the jumbotron, but in that case, the second navbar would overlay the image. Any help?
It's really hard to tell from that image, it would help if you installed something like chrome dev tools, but looking at it, my guess is that the image is a transparent PNG, and the there is a large transparent area around the logo, which you cannot see but its acting as margin, take the logo into photoshop and crop it accordingly.
I've been starting to explore Twitter Bootstrap, and I tried to write or replicate some of their example codes. I used a div with their .container class for the wrapper, and added some rows and columns in it. Having a div with a .container class supposedly centers the div automatically, but in my case, I'm having an unbalanced content. The white space on the left side is much wider than the white space on the right side. Here's the code (I'm not using any css styles):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Room</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='style.css' />
<!--responsive bootsrap here-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div> <!-- first row -->
<div class="span12">
<div class="hero-unit">
<h1>Hey Mark! <small>and everybody!</small></h1>
<p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div><!-- second row -->
</div>
</div>
</body>
</html>
Here is the screenshot:
https://dl.dropboxusercontent.com/u/70465637/error_center.jpg
Notice how the left white space is wider than the right white space.
Help Please, thanks in advance.
Your div.span12 should be a child of div.row.
<div class="row">
<div class="span12"></div>
</div>
replace body tag with this
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div>
<!-- first row -->
</div>
<div class="row">
<div class="span12">
<div class="hero-unit">
<h1>
Hey Mark! <small>and everybody!</small></h1>
<p>
Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very
passionate about film making. I love the idea on sucking on making films, spending
$6m for my first feature film, which is my masterpiece of course! The title of my
masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit
her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div>
<!-- second row -->
</div>
</div>
</div></body>
check your code properly your span12 div should come inside of <div class="row"></div>
your code should be something like this
<div class="container">
<div class="row">
<div class="span12"> your content goes here </div>
</div>
</div>
If you're still having trouble with the whitespace after putting your span12 div inside your row, then it might be because Bootstrap specifies its own margins and padding etc.
You may have to set your own margins or padding for your span. You can override the bootstrap styles in your CSS with the !important declaration:
.span12 {
margin-left: -50px !important;
}
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!