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);
}
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);
I have the following page menu
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container">
<div class="row">
<div class="col-xs-11 col-xs-offset-1" >
<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>
<div class="navbar-brand">
My logo
</div>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><div class="some_class" style="margin: auto;"></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
also I have the following bootstrap carousel:
<div id="carusel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox" >
<div class="active item" id="item1">
<img class="new" src="../image1.png" style="min-height:496px;max-height: 896px;width: 100%" alt="...">
<div class="carousel-content">
<div class="row">
<div class="col-xs-11 col-xs-offset-1" >
<div class="col-md-8 center-block" >
Content1
</div>
<div class="col-md-8 center-block" >
Content2
</div>
</div>
</div>
Menu consists of left part and right part.
There is a content placed over my carousel.
The content consists of left column and right column.
How can the left column be placed just below the left part of menu(the same X coordinate), and the right column be placed just below right part of menu. (The same Y coordinate).
Telling in another words:
How can I place "Content 1" just below the "My Logo" of menu. I mean place them in a way, that they both will have the same x coordinate, the same left margin.
So I want to align content of my carousel according to bootstrap menu.
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.
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>