Navbar covering text (Bootstrap) - javascript

I finally started playing around with twitter bootstrap a little but. Im trying to center some text in the middle of the page, however the Navbar is covering part of it. Can somebody help? Im still new to bootstrap and web design in general.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<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]-->
</head>
<style type="text/css">
.container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
vertical-align:text-bottom;
}
.starter-template{
}
</style>
<body>
<div class="navbar navbar-inverse 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="#">Me</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


When using .navbar-fixed-top, you have to add padding to the top of the body.
body {
padding-top: 50px;
}


One solution is just to center the text.
text-align:center
Another solution is to center the block.
<!--Stack the columns on mobile by making one full-width and the other half-width-->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop-->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

Related

Jquery code only works sometimes with Bootstrap 4

I'm not able to get my jquery code to work with my Bootstrap 4. div.
My goal is to have two divs (fluid bootstrap containers) in the banner section, however one showing upon loading the page for about 5sec. and then gradually fading out while the next div gradually fades in.
I'd appreciate your help and if possible an explanation why my second block of code won't work.
PS: I know that the 2nd code block does not represent my goal, but it should also work and does not.
This works:
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
But this doesn't work:
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
In my CSS file I have the following:
#div-b {
display: none;
}
In my HTML file I have the following:
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>TEXATREK</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
<a class="navbar-brand" href="">
<img class="brand-logo" src="images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
</a>
<!--HAMBURGER Toggler Icon-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu" >
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR -> div BELLOW -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto mr-5 ">
<li class="nav-item mr-5"><a class="nav-link" href="">Users</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Products</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Items</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Pigis</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Rolls</a></li>
</ul>
</div>
</nav>
<!-- SECTION 1 -->
<!--WELLCOME PAGE SECTION-->
<div id="div-a" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="hex-banner img-fluid" src="images/Banner/Hexagon-Banner/Hexagon_Photo_Grid_with_logo_in_middle 1915x615.png" alt="">
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- START-->
<div id="div-b" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1>SIGN UP NOW BITCHES</h1>
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- END-->
<!-- SECTION 2 -->
<!--INFORMATION ABOUT TEXATREK 1. US 2.OUR STRENGTH 3. WHY TEXATREK-->
<div class="container-fluid pt-5">
<div class="row">
<div class="mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<!--WHAT WE DO info section-->
<div class="texatrek-info what-we-do">
<h2>WHAT WE DO</h2>
<h3>Our company specializes in sourcing precision components that are manufactured in India by our network of carefully selected, high quality suppliers, all of which are ISO 9001 certified. Our goal is to ensure reliable supplies at competitive costs and with zero defects.</h3>
</div>
<!--OUR STRENGTHS info section-->
<div class="texatrek-info our-strengths">
<h2>OUR STRENGTH IS YOUR ADVANTAGE</h2>
<h3> We manage and expand our carefully selected Indian supplier base to meet the ever-growing demand of our customers. By offering a broad selection of manufacturing technologies we are able to support you to meet the challenges you are facing in terms of design and supply chain, that is optimized for manufacturing and thus resulting in reduced unit cost. </h3>
</div>
<!--BACKGROUND IMAGE HEXAGONS-->
<div class="product-background">
<img class="img-fluid product-background-img" src="images/Background/Background-info_cropped.png" alt="">
</div>-
</div>
</div>
</div>
<!-- SECTION 3 -->
<!--PRODUCTS AND SERVICES SECTION-->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<img id="products-services" class="img-fluid"src="images\Info_Graphics\Products and Services.png" alt="">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="solutions-container">
<!--THE BLACK IN THE BLUE BLOCK (div)-->
<div class="solutions-inside">
<h3 class="solutions text-left">SOLUTIONS SOLUTIONS SOLUTIONS THAT FIT</h3>
<h5 class="solutions-para text-left">paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</h5>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="TrexatekNavbar_V3_Bootstrap.css">
<script>
$('#div-a').fadeOut('slow').promise().done(function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').fadeIn('slow');
});
/*
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
*/
</script>
</body>
</html>

Onclick function to show specific element from menu

When i click on a element(MMA)in my left navigation bar i want it show up on the page and when i click on a other element(boxing) in my navigation i want that to be shown instead, like tabs.
I have tried but cannot get it to work, heres my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startsida</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- header -->
<div class="jumbotron">
<h1>Top five facts about different martial arts</h1>
</div>
<!-- Top navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li >Start</li>
<li class="active">Martial arts</li>
</ul>
</div>
</nav>
<!-- side navigation -->
<div class="row" id="row">
<div class="col-sm-3" "col-lg-2" id="menu" >
<div class="sidebar-nav" "list-group">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="head">Martial arts:</h1>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<h3 class="side">Martial arts:</h3>
<ul class="nav navbar-nav" id="ul">
MMA
Boxing
Muay thai
Kickboxing
Takwando
Karate
Braziliansk jijutsu
Wrestling
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class=" col-sm-9 menu-tab">
<div class="menu-tab-content ">
<h1>Top 5 fact about MMA</h1>
</div>
<div class="menu-tab-content active">
<h1>Top 5 fact about Boxing</h1>
</div>
</div>
</body>
</html>
jquery:
$(document).ready(function() {
$("div#menu>div.sidebar-nav>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.menu-tab>div.menu-tab-content").removeClass("active");
$("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
});
});

Your selector is wrong. div#menu>div.sidebar-nav>a looks for an a that's an immediate child of div.sidebar-nav. But in your HTML, the a is nested several levels below that, so it should be div#menu>div.sidebar-nav a
$(document).ready(function() {
$("div#menu>div.sidebar-nav a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.menu-tab>div.menu-tab-content").removeClass("active");
$("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
});
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
v
<!-- header -->
<div class="jumbotron">
<h1>Top five facts about different martial arts</h1>
</div>
<!-- Top navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li>Start</li>
<li class="active">Martial arts</li>
</ul>
</div>
</nav>
<!-- side navigation -->
<div class="row" id="row">
<div class="col-sm-3" "col-lg-2" id="menu">
<div class="sidebar-nav" "list-group">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="head">Martial arts:</h1>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<h3 class="side">Martial arts:</h3>
<ul class="nav navbar-nav" id="ul">
MMA
Boxing
Muay thai
Kickboxing
Takwando
Karate
Braziliansk jijutsu
Wrestling
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class=" col-sm-9 menu-tab">
<div class="menu-tab-content ">
<h1>Top 5 fact about MMA</h1>
</div>
<div class="menu-tab-content active">
<h1>Top 5 fact about Boxing</h1>
</div>
</div>

Making a div inside a bootstrap col full height and putting buttons at the bottom of it

I have this template of code here and I want to make the panel in the center column full height of the visible page. Keyword 'visible' page. And then I want to place the button at the bottom of that panel, while the rest of the panels elements are at the top.
I tried setting the div to 'height: 100vh' but it makes the div higher then the visible page. I'm not sure why, maybe it has something to do with the navbar at the top?
The desired effect is that I will always see the button at the bottom of the page, regardless of the page size.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Messages
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile
</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests
</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong>
</p>
People are looking at your profile. Find out who.
</div>
<p>Link
</p>
<p>Link
</p>
<p>Link
</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left" style="height:100vh">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong>
</p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>

Yeah as you already said, the navbar is the "problem" here.
If you try to subtract the navbar height from the desired height of the panel it should work:
element.style {
height: calc(100vh - 100px);
}

Generating Image Elements with .img-responsive Bootstrap Class

So I am trying to autoload images on a page via JS. I want the page to essentially be a blank page that can act as many pages.
Structure:
Homepage with projects > Click on project > Project page
However, I cannot figure out how to get the images to load into my bootstrap columns as .img-responsive images.
I will attach snippets to both pages and JS.
NOTE: Images are currently all the same, plan to change later...
Thanks!
HOMEPAGE -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philesq</title>
<!-- external CSS link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<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="./index.html">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li name="works">works</li>
<li name="about">about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=praxis">
<img src="./images/praxis.png" class="img-responsive">
<h6>praxis studio</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#woodbury">
<img src="./images/woodbury.jpg" class="img-responsive">
<h6>woodbury school or architecture</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#mmr">
<img src="./images/mmr.gif" class="img-responsive">
<h6>miracle manor retreat</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#felix">
<img src="./images/felix.gif" class="img-responsive">
<h6>félix beltrán</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#wtmf">
<img src="./images/wtmf.png" class="img-responsive">
<h6>within the magnetic field</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#cargo">
<img src="./images/cargo.gif" class="img-responsive">
<h6>cargo typeface</h6>
</a>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
Project Page-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philesq</title>
<!-- external CSS link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<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="./index.html">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li name="works">works</li>
<li name="about">about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 column text-center">
<div id="imageContainer" class="img-responsive">
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
Java Script
$(function(){
var projects = ['praxis','woodbury','mmr','felix','wtmf','cargo'];
var pages = {
'praxis': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'woodbury': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'mmr': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'felix': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'wtmf': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'cargo': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
}
var page = window.location.hash.substring(1);
page = (page) ? page:'praxis';
console.log(page);
for(var i = 0; i < pages[page].length; i++)
{
var imagePath = pages[page][i];
console.log(imagePath);
$('#imageContainer').append('<img src="./' + imagePath + '">');
}
});

Just create them with img-responsive class:
$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');

img-responsive is a class defined in Bootstrap. If you want the appended images to be img-responsive, you just need to include this class in the class list while appending.
Just change
$('#imageContainer').append('<img src="./' + imagePath + '">');
To
$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');

You can also do this with vanilla JS, in case you didn't want to bother with jQuery.
var element = document.createElement('img');
element.className = "img-responsive";
// Or
element.classList.add("img-responsive");
var container = document.getElementById('yourContainer');
container.appendChild(element);

Why Chrome & Firefox render bootstrap CSS different than Safari

I am building a static web site with bootstrap. Working on local the layout looks fine, when deployed to the web, Safari OK, but Chrome and Firefox seem like if they dont support several bootstrap CSS rules or I am doing something wrong.
Safari OK
Chrome KO
Live code: (make sure to accept the certificate)
https://canales.paperplane.io/
Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canales Auty</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- #Header -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><img src="img/header.png"></div>
<div class="col-md-1"></div>
</div>
<!--Navbar-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT THE FIRM</li>
<li>PROFESSIONALS</li>
<li>PRACTICE AREAS</li>
<li>NEWS ROOM</li>
<li>CAREERS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<!--Mosiaco -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4">
<img id="d1" src="img/mosaico_1.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy Lut!</p>
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-md-3">
<img id="d2" src="img/mosaico_2.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy 2!</p>
<p>Lorem ipsum</p>
</div>
<img src="img/mosaico_3.png">
</div>
<div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>hola</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/contentHover.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#myTootTip').tooltip();
$('#myPopOver').popover();
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
</body>
</html>

Chrome won't load non-SSL scripts over a webpage open with https://.
The best way to reference your external scripts is to not specify the protocol.
As in:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery.js"></script>
with //
Because your jQuery etc. is not loading, the site is breaking. Note: you will need to verify that your CDN will serve the files over https.

Categories