Im trying to align my section content exactly the same in every screen resolution I tried to use min-width and max-width but it isnt working as it should here is the code and the working link is
http://www.cinqomedia-test.com/cs
<!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.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Creative Style is one of Bahrain's most highly regarded providers of contemporary interior design services.">
<meta name="author" content="Cinqo Media">
<link rel="shortcut icon" href="ico/favicon.png">
<title>Creative Style - Stylish, Comfortable & Luxurious Furniture</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/onepage-scroll.css" />
<!-- 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.3.0/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> </script>
<script type="text/javascript" src="js/jquery.onepage-scroll.js"></script>
<script charset="utf-8" src="js/modernizr.js" type="text/javascript"></script>
</head>
<body cz-shortcut-listen="true" id="fade">
<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="#"><img src="img/creative-style-logo.png" class="img-responsive" alt="Creative Style"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Projects</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="main">
<section class="page1">
<div class="layer">
<div class="container theme-showcase">
<div class="jumbotron">
<h1>Class Defined</h1>
<h4>Since 2002, Kingdom of Bahrain</h4>
<p>View More Projects </p>
</div>
</div>
</div>
</section>
<section class="page2">
<div class="col-xs-12 col-md-8">
<div class="section2">
<h1>Lorem Ipsum</h1>
<p>Donec faucibus ipsum id sapien ultrices, a vulputate elit imperdiet. Morbi at euismod nisi. Praesent venenatis tempus ligula. Nunc dignissim ullamcorper velit, eu semper metus imperdiet vel. Nulla gravida mauris a nunc hendrerit, ut gravida diam hendrerit. Nam ac tempus felis, a posuere justo. Proin sollicitudin elit commodo consequat vulputate. Mauris convallis consectetur nulla vestibulum iaculis. Nulla facilisi. Nunc quis arcu urna.</p>
Read More
</div>
</div>
</section>
<section class="page3">
<div class="container theme-showcase">
<div class="jumbotron">
<h1>Lorem Ipsum</h1>
<p>Donec faucibus ipsum id sapien ultrices, a vulputate elit imperdiet. Morbi at euismod nisi. Praesent venenatis tempus ligula. Nunc dignissim ullamcorper velit, eu semper metus imperdiet vel. Nulla gravida mauris a nunc hendrerit, ut gravida diam hendrerit. Nam ac tempus felis, a posuere justo. Proin sollicitudin elit commodo consequat vulputate. Mauris convallis consectetur nulla vestibulum iaculis. Nulla facilisi. Nunc quis arcu urna.</p>
Read More
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section"
});
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.2.0/holder.js"></script>
</body>
</html>
You have couple of issues. 1) you have had an extra closing div after the closing div for <div class="main">. 2) you have used col-md-8 div without row or container, so it will consider the width of the parent.
Bootstrap .container class has a predefined width according to the screen size. as well as 'col-xx-xx` classes have their own width.
I have modified your markup and added a container and row inside the section. You may have look into this at: http://jsbin.com/OzAMeZI/1 and edit it at http://jsbin.com/OzAMeZI/1/edit .
If you want to get a white arrow shape to the col-md-8 class, you can consider :before or :after pseudo` classes to section or container elements. But, please make sure that you use media queried css styles.
Related
I am using an online template for used my project. When I run my application, my template is working perfectly.
The problem is when I give a route to go to another page of my application for example (area/controller/action) then its not showing any image on my view page which I expected.
ere is my _Layout page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>#ViewData["Title"] - UBC</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
/>
</environment>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"
/>
<link rel="stylesheet" href="~/theme1/css/all.min.css" />
<link rel="stylesheet" href="~/theme1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/theme1/slick/slick.css" />
<link
rel="stylesheet"
type="text/css"
href="~/theme1/slick/slick-theme.css"
/>
<link rel="stylesheet" href="~/theme1/css/templatemo-style.css" />
</head>
<body id="servicesPage">
<div
class="parallax-window"
data-parallax="scroll"
data-image-src="theme1/img/1.jpg"
>
<div class="container-fluid">
<div class="row tm-brand-row">
<div class="col-lg-4 col-11">
<div class="tm-brand-container">
<i class="fas fa-4x fa-pen tm-brand-icon"></i>
<div class="tm-brand-texts">
<h1 class="text-uppercase tm-brand-name text-light big-stone">
UBC
</h1>
<p class="small text-light">We Bring The Best For You</p>
</div>
</div>
</div>
<div class="col-lg-8 col-1">
<div class="tm-nav">
<nav
class="navbar navbar-expand-lg navbar-light tm-bg-white-transparent text-dark"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="testimonials.html"
>Testimonials</a
>
</li>
<li class="nav-item green-highlight active">
<div class="tm-nav-link-highlight"></div>
<a
class="nav-link"
asp-action="Index"
asp-controller="Home"
>Contact <span class="sr-only">(current)</span></a
>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Testimonials header -->
<section class="row" id="tmServices">
<div class="col-12">
<div
class="parallax-window tm-services-parallax-header tm-testimonials-parallax-header"
data-parallax="scroll"
data-z-index="101"
data-image-src="img/people.jpg"
>
<div
class="tm-bg-black-transparent text-center tm-services-header tm-testimonials-header"
>
<h2
class="text-uppercase tm-services-page-title tm-testimonials-page-title"
>
The University Of British Columbia
</h2>
<p class="tm-services-description mb-0 small">
Number One University Of The Whole World
</p>
</div>
</div>
</div>
<div class="col-12">
<div class="tm-bg-black-transparent tm-services-detail-box">
<p>
Aenean convallis justo purus, id pulvinar enim finibus vitae.
Fusce et bibendum nisi, vitae mollis turpis. Aliquam tellus mi,
maximus vel orci imperdiet, convallis cursus tortor. Donec
sollicitudin metus sit amet nisl rhoncus, id ultrices risus
interdum. Proin mollis nulla nulla, ac cursus enim ornare a.
Cras quis porta lectus. Pellentesque eu ultrices arcu. Proin ac
tristique dui. Praesent mi odio, aliquam ac leo sit amet, dictum
sodales diam.
</p>
<p>
Quisque commodo, orci eget suscipit vestibulum, metus orci
fringilla urna, eget dignissim justo odio sit amet tellus. Morbi
dapibus molestie massa nec congue. Etiam lacinia pretium psuere.
Integer sodales porttitor lobortis. Nam vestibulum vestibulum
lectus non pulvinar. Vivamus eget sapien vitae magna lobortis
rhoncus molestie sit amet est. Fusce ultrices justo vitae
blandit consequat.
</p>
</div>
</div>
</section>
<section class="row tm-contact-row"></section>
<section class="row tm-testimonials-section">
<div class="col-12 tm-carousel">
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-1.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
<p class="tm-about-description">
Vestibulum semper dolor sed elit mattis placerat cursus sed ac
urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu
velit semper turpis semper.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-2.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
<p class="tm-about-description">
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-3.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
<p class="tm-about-description">
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="img/person-1.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
<p class="tm-about-description">
Vestibulum semper dolor sed elit placerat cursus sed ac urna.
Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit
semper turpis semper.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="img/person-2.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
<p class="tm-about-description">
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-3.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
<p class="tm-about-description">
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
</p>
</div>
</div>
</section>
<section>
<div class="container tm-bg-black-transparent tm-services-detail-box">
<partial name="_CookieConsentPartial" />
#RenderBody()
</div>
</section>
<!-- Call to Action -->
<section class="row tm-testimonials-cta" id="tmCallToAction">
<div class="col-12 tm-call-to-action-col">
<img
src="theme1/img/call-to-action-3.jpg"
alt="Image"
class="img-fluid tm-call-to-action-image"
/>
<div class="tm-bg-white tm-call-to-action-text">
<h2 class="tm-call-to-action-title">
Vivamus sollicitudin tellus
</h2>
<p class="tm-call-to-action-description">
Maecenas maximus tellus in dolor auctor tristique. Nam hendrerit
posuere laoreet. Aliquam erat volutpat. Nulla eros est,
imperdiet vel feugiat non, ullamcorper mattis nulla.
</p>
<form action="#" method="get" class="tm-call-to-action-form">
<input
name="email"
type="email"
class="tm-email-input"
id="email"
placeholder="Email"
/>
<button type="submit" class="btn btn-secondary">
Get Updates
</button>
</form>
</div>
</div>
</section>
<!-- Page footer -->
<footer class="row">
<p class="col-12 text-white text-center tm-copyright-text">
Copyright © 2020 App Landing Page. Designed by
TemplateMo
</p>
</footer>
</div>
<!-- .container-fluid -->
</div>
<script src="~/theme1/js/jquery.min.js"></script>
<script src="~/theme1/js/parallax.min.js"></script>
<script src="~/theme1/js/bootstrap.min.js"></script>
<script src="~/theme1/slick/slick.min.js"></script>
<script>
$(function () {
$(".tabgroup > div").hide();
$(".tabgroup > div:first-of-type").show();
$(".tabs a").click(function (e) {
e.preventDefault();
var $this = $(this),
tabgroup = "#" + $this.parents(".tabs").data("tabgroup"),
others = $this.closest("li").siblings().children("a"),
target = $this.attr("href");
others.removeClass("active");
$this.addClass("active");
$(tabgroup).children("div").hide();
$(target).show();
// Scroll to tab content (for mobile)
if ($(window).width() < 992) {
$("html, body").animate(
{
scrollTop: $("#first-tab-group").offset().top,
},
200
);
}
});
$(".tm-carousel").slick({
dots: true,
infinite: false,
arrows: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1024,
settings: {
arrows: false,
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
{
breakpoint: 600,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
},
},
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
],
});
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
When I run my application, my output is:
when I giving routing for my application, then I found an unexpected output.
my all picture and especially background picture was gone. what's the solution?
The images are using paths relative to the URL. For example when using 'theme1/img/1.jpg' and on the page Admin/Subject; the web browser will look for the image in Admin/Subject/theme1/img/1.jpg
By appending / to the start of image; the web browser will look for image in root of folder. e.g: 'theme1/img/1.jpg'
I try to set up my index page from a combination of the jumbotron and the fix nav bar bootstrap examples.
Using the fix nav bar page of bootstrap, if one reduces the width of the window instead of a navbar list, you obtain a drop menu with the content of the navbar. In my case it does not work. I do not understand what is missing there.
Nevertheless, if I copy the lines between the <nav> and </nav> html tags into the bootstrap example pages it works.
This is my index.html page :
<!DOCTYPE html>
<html lang="en-US">
<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Association M'Langues">
<link rel="icon" href="">
<title>Mon Association</title>
<!-- Bootstrap: 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">
<!-- Bootstrap: 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>
<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
{"description":"L’association .","#type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","#context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"><li class="">
Activités
</li>
<li class="">
Actualités de l'association
</li>
<li class="">
Contact
</li>
<li class="">
À Propos
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<p>Bonjour !</p>
<p>Bienvenu sur le site de l’Association </p>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<!-- FOOTER --><footer>
<p class="copyright">Association </p>
<p>Published with GitHub Pages</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
</body>
</html>
The Bootstrap minified javascript file:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
should be included after the JQuery minified javascript file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
So, your code should be like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Association M'Langues">
<link rel="icon" href="">
<title>Mon Association</title>
<!-- Bootstrap: 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">
<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
{"description":"L’association .","#type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","#context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="">
Activités
</li>
<li class="">
Actualités de l'association
</li>
<li class="">
Contact
</li>
<li class="">
À Propos
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<p>Bonjour !</p>
<p>Bienvenu sur le site de l’Association </p>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<!-- FOOTER -->
<footer>
<p class="copyright">Association </p>
<p>Published with GitHub Pages</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Bootstrap: 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>
</body>
</html>
I need some help constructing a layout grid with the bootstrap framework.
Above is the layout I need to create that adapts to a variety of screen sizes/devices.
Here is my code so far: (Also JS Fiddle Archive : https://jsfiddle.net/emerson05/5zvkdnkq/)
<html lang="en">
<head>
<!-- Set character encoding first -->
<meta charset="utf-8" />
<!-- Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Suitable title -->
<title>Bootstrap Grid Layout</title>
<!-- Link to the Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<style>
div[class^="container"] {
border: 5px solid red;
}
.row {
border: 5px solid orange;
}
div[class^="col"] {
border: 5px solid limegreen;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>A</h1>
</header>
<main>
<div class="row">
<div class="col-md-5">
<h2>B</h2>
<p>Pellentesque gravida luctus pharetra. In felis neque, feugiat at lacus eget, faucibus iaculis velit. Nullam tristique,
justo eget blandit finibus, dui justo aliquam ligula, sit amet iaculis quam lectus sed ex.</p>
</div>
<!-- .col-5 -->
<div class="col-md-7">
<div class="row">
<div class="col-6 col-md-12 col-lg-6">
<h2>C</h2>
<p>Sed ac mi ut ante mollis tristique. In sed nisl quis est sollicitudin varius non et velit. Sed turpis nunc, varius
vitae iaculis ut, viverra eget neque.</p>
</div>
<!-- .col-6 col-md-12 copl-lg-6 -->
</div>
<!-- .row-->
<div class="row">
<div class="col-6 col-md-12 col-lg-6">
<h2>D</h2>
<p>Morbi vel ipsum id dolor rutrum lacinia. Praesent ullamcorper vulputate libero a vestibulum. Cras mollis mollis magna,
ut mattis lacus convallis vel.</p>
</div>
<!-- .col-6 col-md-12 col-lg-6 -->
</div>
<!-- .row -->
<div class="row">
<div class="col-md-12">
<h2>E</h2>
<p>Praesent accumsan, odio quis varius suscipit, nulla ante tincidunt nisl, non interdum quam eros nec nibh. Nulla eget
dapibus metus, ac ultricies purus. Vestibulum et tristique felis.</p>
</div>
<!-- .col-md-12 -->
</div>
<!-- .row -->
</div>
<!-- .col-7 -->
</div>
<!-- .row-->
</main>
<footer>
<p>F</p>
</footer>
</div>
<!-- .container -->
<!-- Supporting JavaScript libraries -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
I have got the layout mostly complete. I am having some trouble with the C,D,E sections of the layout as you'll see. I think the problem is needing to add another .col structure somewhere
Can someone point me in the right direction here, thank you for the help.
Check this https://jsfiddle.net/5zvkdnkq/5/
<div class="row">
<div class="col-6 col-md-12">
<h2>C</h2>
<p>Sed ac mi ut ante mollis tristique. In sed nisl quis est sollicitudin varius non et velit. Sed turpis nunc, varius
vitae iaculis ut, viverra eget neque.</p>
</div>
<div class="col-6 col-md-12">
<h2>D</h2>
<p>Morbi vel ipsum id dolor rutrum lacinia. Praesent ullamcorper vulputate libero a vestibulum. Cras mollis mollis magna,
ut mattis lacus convallis vel.</p>
</div>
</div>
C and D section should be in one row
I am trying to build a webpage using this Bootstrap template
(http://getbootstrap.com/examples/jumbotron/).
I have placed the html and bootstrap-3.3.6 folder in the same folder.
I simple copied the code from "view page source" and executed this html in firefox.
The elements are getting displayed however the formatting is missing. Can someone please let me know what am I doing wrong?
This is the code that I have in the head part:
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
something up with your bootstrap scripts.
I added a link to bootstrap cdn and it worked.
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
</p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
If you are going to make a website with Bootsrap you should make proper directory structure. Every time I use like below.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
index.html
then you can include Js and CSs files like below
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
If you are going to add some JS libraries for sliders or any other plugins you can create a directory called plugins and place those plugin files and include it with your web page so it make your website directory very clean and understandable.
If you have any problems please comment I can help you.
Thanks
I'm trying to do some basic html/css and it doesn't work in one directory of my computer but works on all other directory's. (I'm using a mac and tried on a user level root sites folder and the page does not show up properly.) If i move the folder with all of my files in it (exact same files as in the sites folder) to another directory it shows up properly and works fine..Is there an issue with permissions or something that would cause this?
Thanks!
Code as requested:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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="container">
<div class="row">
<div class="col-xs-6">
<p>Donec sollicitudin mi et magna. Proin non est. Vestibulum diam. Quisque in enim. Sed id dui. Nunc nec sapien. Nulla lacus. Quisque in ante vel nunc semper pellentesque. Nam sit amet lacus sit amet ipsum auctor eleifend. Quisque vitae justo eu neque mattis pellentesque. Suspendisse tristique. Nulla facilisi. Pellentesque hendrerit tristique turpis. Pellentesque eget mi. Vestibulum a lacus.</p>
</div>
<div class="col-xs-6">
<p>Donec sollicitudin mi et magna. Proin non est. Vestibulum diam. Quisque in enim. Sed id dui. Nunc nec sapien. Nulla lacus. Quisque in ante vel nunc semper pellentesque. Nam sit amet lacus sit amet ipsum auctor eleifend. Quisque vitae justo eu neque mattis pellentesque. Suspendisse tristique. Nulla facilisi. Pellentesque hendrerit tristique turpis. Pellentesque eget mi. Vestibulum a lacus.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Within the sites folder it comes up as 2 rows instead of 2 columns and outside of my sites folder it comes out properly as 2 columns instead of 2 rows.