I am currently building a website using bootstrap.
This is my HTML file:
http://www.bootply.com/D5ltZOOcQE
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Committee</li>
<li>Events</li>
<li>Constitution</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Welcome to my website.</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4" align="center">
<img class="contact" src="img/facebook.png" height="120" width="120">
</div>
<div class="col-sm-4" align="center">
<img class="contact" src="img/emailIcon.png" height="120" width="120">
</div>
<div class="col-sm-4" align="center">
<img class="contact" src="img/twitter.png" height="120" width="120">
</div>
</div>
</div>
So, what I wanted to do is have a big jumbotron, similar to the one in the getboostrap.com website. That means I wanted it at least twice the size of my current jumbotron.
In the <head> of my HTML file, I have a place where I have put a special rule for my jumbotron, so that I include the picture and also some other stuff. This is the code:
.jumbotron {
position: relative;
background: url('img/background.jpg') no-repeat center center;
overflow: hidden;
height: 100%;
width: 100%;
background-size: cover;
}
However, when I change the size of height to 500px for example, I see no change. I think this is because my jumbotron kind of adapts to the size of my container? So if I add more text it will grow but now it doesn't. However, I want the whole picture to show, and this doesn't happen right now.
Any help is welcome :)
Just to add to this, and not necessarily saying this is the ultimate solution. I rarely touch any of the built in bootstrap code and create my own classes. These normally will apply no problem to any bootstrap classes you may be using. for instance.
<div class="jumbotron customclass">
.customclass {
width: 100%;
height: 500px;
}
This generally always works for me best and you avoid messing with bootstrap directly which could potentially break other portions of your website if you have already designed quite a bit utilizing bootstrap.
Very rarely do I ever target bootstrap classes directly.
You can see an example from your original bootply here: http://www.bootply.com/Qcdz3AxWvP
I added a background color as well, just to show how creating your own class works just fine.
In your Bootply you have the height set at 100% and your question states 500px which maybe matters and may very well not. The Jumbotron class doesn't have a set height, padding is used instead. Setting the height should be no different then the rules in your question so perhaps you have multiple jumbotron rules or you haven't placed your stylesheet after bootstraps.
*(you should have zero need to use !important)
Bootstrap Rules (Not complete)
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 15px;
padding-left: 15px;
border-radius: 6px
}
.jumbotron .container {
max-width: 100%
}
#media screen and (min-width:768px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px;
padding-left: 60px
}
.jumbotron .h1,
.jumbotron h1 {
font-size: 63px
}
}
See working example Snippet at FullPage.
/*FOR DEMO ONLY*/
.navbar.navbar-inverse {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
.jumbotron.jumbotron-one {
position: relative;
background: url('http://placehold.it/2000x500/f00/fff') no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
margin-bottom: 0;
}
#media (min-width: 768px) {
.jumbotron.jumbotron-one {
height: 500px;
}
}
.jumbotron.jumbotron-two {
position: relative;
background: url('http://placehold.it/2000x500/ff0/fff') no-repeat center center;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Committee
</li>
<li>Events
</li>
<li>Constitution
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron jumbotron-one">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Height 500PX</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
</p>
</div>
</div>
<div class="jumbotron jumbotron-two">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Default Height (padding)</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
</p>
</div>
My guess is bootstrap.css is overriding whatever custom css you have. To correct this, change custom css height to this height: 500px !important, or load your css file before bootstrap.css (Remember, when 2 CSS files are used, the first one loaded always takes precedence, unless !important is used.)
Related
I have a navbar that will stick to the top of the page when it slides, when this happens it adds two classes to the div "sticked in" this works perfectly but what I would like to do is
<div class="navbar navbar-expand-sm sticked in">
<div class="container">
<div class="header-logo">
<a href="http://localhost/2021/site/">
<img src="logo.svg" class="custom-logo">
</a>
</div>
</div>
</div>
After it sticks i would like to scale the img (logo.svg) down so what im looking for is the correct selectors for if "sticked in" is on my nav bar change the height of .header-logo img
for example:
.sticked.in > div > a > .header-logo img{
height: 20px;
}
obviously, these are the wrong selectors so im looking for a way of going down the css to header-logo img if "sticked in" is present
You don't need the > child selector. Example with toggle:
document.getElementById("toggle-class")
.addEventListener("click", function()
{
document.querySelector(".navbar")
.classList.toggle("sticked");
});
img {
height: 50px;
width: 50px;
background-color: red;
}
.sticked.in .custom-logo {
background-color: blue;
}
<div class="navbar navbar-expand-sm sticked in">
<div class="container">
<div class="header-logo">
<a href="http://localhost/2021/site/">
<img class="custom-logo">
</a>
</div>
</div>
</div>
<button id="toggle-class">Toggle</button>
So since im new I cant show you guys any pictures to demonstrate the issues that im having, but ill try to explain it to you in the best way.
I have a background-image: url(), that works as my "hero" for my website, I also have a bootstrap button that i use as a "browse your pc for a file" button, but for some reason the button isnt clickable when inside my hero tag, only when i put it outside.
HTML
<body>
<div id="hero">
<div id="hero-overlay">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">AppInvest</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Upload</li>
<li>Analyze</li>
<li>About</li>
</ul>
</div>
</nav>
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none;">
Browse...
</label>
<div style="background:transparent !important" class="jumbotron text-center">
<h1>
AppInvest
</h1>
<div class="container">
<div class="row">
<div class="col-sm-1 text-left">
<p>Who are we?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
}
#hero {
background-image: url('../img/rarri.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
#hero-overlay {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -5;
background-color: rgba(0,0,0,0.5);
}
Also if you could give me some tips on the best way to make an upload button with a "total files attached" at the center of the screen i would appreciate it.
And yeah obviously its CSS and HTML related.
The button isn't clickable because of the negatvie z-index of #hero. the z-index has no effect anyway in this szenario so i removed it and it works:
https://jsfiddle.net/967h3ty2/
To have a "total files attached" at the center of the screen you need to count the uploaded files on the server side using php or a similar technology.
I am not a front-end developer so I suspect I might be missing something really basic. Nevertheless I cannot figure out a solution.
I have a div element and I simply want to apply some padding at the top so that it does't interfere with the heading. I have looked around and I have seen similar problems with margin collapsing but I don't think it's the case since here I am dealing with two separate div not enclosing each other (tot-header and content).This is what I have written so far.
<!DOCTYPE html>
<html>
<head>
<title>Blogologo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/head.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
and the css
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
However the padding seems not to work. Any ideas?
What browser are you using? From what I can see it seems to be working perfectly. There is a huge space between the two divs caused by the padding-top of the .content div. That is until your scroll, because your top header has a fixed position.
This is your code:
http://codepen.io/anon/pen/WweMPG?editors=1100
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
The code appears to me to be working perfectly. What did you expect it to look like?
remove
position:fixed;
and change your .content css
from padding-top:10cm; to padding-top:10px;
in your css you can try using pixels instead of cm e.g.
.content {
padding-top: 100px;
}
Also you may try using margin instead of padding e.g.
.content {
margin-top: 100px;
}
And give it more padding or margin untill your content appears
I have a bootstrap webpage with header and footer and I would like to set a background image for the div in between.
My goal is that the background image could cover all area between header and footer (div id=xx in code below) while I don't need to hard coded height and width, but failed.
Can you please help?
<body>
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" style="background:url(images/background.jpg) no-repeat;background-size:940px 500px;height:500px;width:940px" title="KnowSG" align="left" id="hplogo">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
CSS
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -50px;
}
#push {height: 50px;}
.footer {
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
padding-top: 15px;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
Okay I cleaned your code up a bit. You had 2 id attributes on the same element which you shouldn't do. and I added a class.
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" title="KnowSG" align="left">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
#xx {
background-image: url('http://placehold.it/1920x1080.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Is it possible that your background image is either not where you think it is, or missing? Quick test: in a new browser window: http://yourdomain.com/images/background.jpg (using the file / dir names from your question code)
This might be the problem: Note also that if you have an external stylesheet (in your example you styled the #xx div using inline html attribute), and if that stylesheet is in a subfolder, such as /css, you must do this (because the images folder is not directly underneath the css folder):
background:url(../images/background.jpg) no-repeat; /* Note the ../ prefix */
I created a jsFiddle and substituted the placeholder website placekittens.com for your hard-coded image - it works fine.
jsFiddle Demo
Observations:
If you want the background image flush up against the header and footer, you must make these adjustments (as I did at top of the jsFiddle's CSS):
.container-fluid h3 {margin:0;}
.navbar {margin:0;}
You can do this if you want the bg image flush up against the header, but not the text:
.container-fluid h3 {margin:0;padding:50px;}
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)