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
Related
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
I want my cordova app to look less like a web app and more like a real app by eliminating left and right scroll.
I've set the overflow-x property to hidden on the html and body tags, and that works for all but the page below, which scrolls left and right but shouldn't.
Have I misconstructed the grid? I've tried to apply the "overlow-x: hidden" property to an enclosing div instead of the body and html as suggested elsewhere, tried applying the property to the individual divs, attempted limiting width on the divs. I've tried changing the html position to fixed (which fixes the left-right scroll but also stops up down which I need). You can view the page below on an iOS device to see the behaviour here. Which of my lousy skillsets -- css, html, or bootstrap -- is letting me down here?
<!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
<head>
<meta charset="utf-8" />
<title>
My Awesome Title
</title>
<meta name="generator" content="BBEdit 11.0" />
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css">
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js">
</script>
<script type="text/javascript" src="scripts/bootstrap.min.js">
</script>
<script type="text/javascript" src="scripts/bootbox.min.js">
</script>
<style>
html, body {
overflow-x: hidden !important;
}
</style>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;">
<h2 class="text-center">
My Awesome Title
</h2>
<br />
<div id="hexpix" class="center-block">
<br /><br />
<div id="hexpixdiv">
</div>
</div>
<!-- Alert Space -->
<div id="AlertSpace" class="center-block" style="text-align:center; width:75%">
</div>
<br />
<!-- Hex Content Space for text -->
<div id="hexindex" class="text-center">
</div>
<!-- hexindex close -->
<div id="hexcontent" class="text-center">
<!--
<p>
Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
<p>
-->
</div>
<!-- hexcontent close -->
<div id='HelpButton'>
</div>
</div>
<!-- Column class close-->
</div>
<!-- Row class close-->
<br />
</div>
<!--Container close-->
<div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;">
<div class="row">
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Reddit">
<span>
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="SMS">
<span class="icon-export">
</span>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Email">
<span class="icon-gmail">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Twitter">
<span class="icon-twitter">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Facebook">
<span class="icon-facebook">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="tumblr">
<span>
</span>
</a>
</div>
</div>
<!-- Row -->
</div>
<!-- Sharestrip -->
<div id="footer" style="position: absolute;
bottom: 0;
width: 100%; height: 20px;">
<!-- See hex.css for custom css on this -->
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)"
<span class="nav-link">
1
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
2
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
3
</span>
</a>
</div>
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Navbar -->
</div>
<!-- End Footer -->
</body>
</html>
When you set overflow: hidden to element it doesn't mean it stops to be scrollable... it just hides the scrollbar. Since mobile devices scroll contents when touching anywhere on the element, it just remains scrollable.
The fact is - your website is scrollable on X-Axis even on desktop devices, you just hide it by using overflow-x: hidden on body tag.
The reason why your website is x-scrollable on all devices is that you forgot to add class="container" to <div id="sharestrip"... and the row inside it has 100%+15px(left margin)+15px(right margin) which is bigger than window width.
This behaviour is reduced by .container by it's padding-left: 15px and padding-right: 15px, so simply you need to remember of adding class="container" to parent of the row.
I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container
The following is the code:-
<!DOCTYPE html>
<html>
<head>
<title>Home page </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="containe-fluid">
<div class="row" >
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU<br>$229.00
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core<br> $269.00
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am unable to put the diffent products in one line and it is coming one below the other
Please help me am a newbie and am caught up.
Avoid the use of inline width: 25% for the col-x-* classes. Also for supporting mobile width, Add col-xs-6.
col-xs- has no minimum screen size, so it makes sense to always include it. This is further explained in this Boostrap Grid Sizes post. To save you some reading, the main bits of interest are:
.col-xs-: Phones (<768px)
.col-sm-: Tablets (≥768px)
.col-md-: Desktops (≥992px)
.col-lg-: Desktops (≥1200px)
To add offset, use col-md-offset-4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-md-6 col-md-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core
<br>$269.00
</p>
</div>
</div>
</div>
</div>
Plz add Bootstrap link to the page in the head section
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Also, remove width=25% from the columns
also, change
<div class="containe-fluid">
to
<div class="container-fluid">
Stop using width:25% . The cause is when you use inline style it gets top priority on loading in html view page . And thus the whole bootstrap and inline style gets messed up .
Hope this will help your project get finished faster .
Please make sure that you load bootstrap in your html file.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Home page </title>
</head>
I have tested your code with bootstrap css and it's working like it should.