I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this?
HERE IS LIVE VERSION: http://codepen.io/anon/pen/waYBxB
THE HTML
</head>
<body>
<!--
==============================
LOGO HEADER
==============================
-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-6"></div>
</div>
</div>
</section>
<!--==============================
SLIDING BANNEER
==============================-->
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs"><img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"></div>
</div>
</section>
<!--==============================
MENU BAR
==============================-->
<section>
<div class="container">
<div class="col-md-12">
<nav>
<ul>
<li>Home</li>
<li>Codepen.io</li>
<li>A longer button</li>
<li>This is my really long button</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</section>
<!--==============================
MAIN CONTENT
==============================-->
<section>
<div class="container" id="MainPage">
<div class="row">
<div class="col-md-9 MainContent"><h3>codepen ---- CODING HAS NEVER BEEN SO EASY!</h3><br> Notice how the white is centered but he image and the logo is not. How do I fix this? </div>
<div class="col-md-2">I AM IN THE BANNER SECTION </div>
</div>
</div>
</section>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
THE CSS
body {
background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
}
nav ul {
list-style: none;
overflow: hidden;
height: 47px;
}
nav ul li a {
color: #F9F7F7;
background-image: linear-gradient(to top, #ff6351, #ffcc6e);
padding: 8px 22px 8px 22px;
display: block;
text-align: center;
font-size: 22px;
float: left;
margin-right: 5px;
color: rgb(255, 255, 255);
background-color: rgb(120, 120, 120);
text-shadow: rgb(79, 79, 79) 1px 1px 3px;
}
.Logo {
margin: 15px;
}
#MainPage
{
background-color: white;
}
.midText
{
text-align:center
}
.MainContent
{
margin: 33px;
}
this would bring the banner image to the center of the page. What you have to do is to add the infront of the image.
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs">
<center>
<img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive">
</center></div>
</div>
</section>
You should take advantage of the column system to help center your divs.
If you know bootstrap rows are 12 column-widths wide, you need a row that = 12 columns.
So...
<section>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-4"></div>
</div>
Now you have 4|4|4, but you could also do 3|6|3 or even 2|8|2 or 1|10|1. That should always center your divs. Hope that helped.
In case my mumbling makes no sense, here are pretty pictures with explenation: http://getbootstrap.com/examples/grid/
As you have a number of breakpoints, why not just set the width of the img in pixels? The aspect ratio of the img & the containing div are different, hence why it doesn't fit precisely.
display: block;
max-width: 1024px;
margin: 0px auto;
height: auto;
For the logo...
<div class="col-md-12"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
.Logo {
display: block;
margin: 15px auto;}
Quick solution for you.
Related
I'm trying to build two-column footer with fluid backgrounds using bootstrap grid system, see the example below. The content inside these columns should not be fluid. It also should be responsive and stack on small devices.
Is this possible?
Here's what I did for now, but as i said the content should not be fluid, how do I achieve this?
.footer .row {
height: 100px;
color: white;
}
.left {
background-color: #222;
}
.right {
background-color: #333
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 left">
Left
</div>
<div class="col-md-7 right">
Right
</div>
</div>
</div>
</div>
Link to pen
Example Image
HTML:
<footer>
<div class="container-fluid">
<div class="row">
<div class="footer-col-rt col-md-6">
....
</div>
<div class="footer-col-lf col-md-6">
...
</div>
</div>
</div>
</footer>
CSS:
footer .footer-col-rt {
background-color: #233140;
}
footer .footer-col-lf {
background-color: #2C3E50;
}
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
So I'm new to html and css, and right now I'm trying to figure out how to fix the positioning on this page.
It normally looks like the first image in the album:
http://imgur.com/a/LHbRp
But for some reason there is this white-space to the left which can be scrolled to if, overflow-x is not "hidden" like the second picture of that album.
Also, I don't know if you people go on facebook or other websites (like this one even), but when you resize a page, the elements on the page don't start just jumping around, but if I have overflow-x: hidden; then I assume they elements have to jump around, and the text will start to wrap, like third picture in the album.
So how do I go about making the page not move around when the window is resized, and as a bonus, what is that whitespace?
-Chris
EDIT (some code):
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="shift.css">
</head>
<body>
<div id="wrapper">
<!-- Navbar stuff -->
<div class="nav">
<div class="container">
<ul class = "pull-left">
<li>Logo</li>
<li>Browse</li>
</ul>
<ul class = "pull-right">
<li>Sign Up/Login</li>
<li>Help</li>
</ul>
</div>
</div>
<!-- Main swipey thing -->
<div class ="jumbotron">
<div class ="container">
<h1>Blah blah blah</h1>
</div>
</div>
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container">
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container">
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<ul class="pull-right">
<li>Contact</li>
<li>About Us</li>
<li>Bug Tracking</li>
</ul>
</div>
</div>
</body>
And the css:
/*! Other stuff */
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/*! Navbar css */
.nav {
background-color: #DEB087;
border-bottom: 1px solid #DEB087;
}
.nav a {
color: #875D4B;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
}
.nav li {
display: inline;
}
/*! jumbotron */
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #DEB087;
font-size: 40px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
/*! Buy/Sell */
.portals {
background-color: #f7f7f7;
padding: 14px 10px;
border-bottom: 1px solid #dbdbdb;
float:none;
}
.buy-portal h3 {
font-size:20px;
}
.sell-portal h3 {
font-size:20px;
}
/*! Footer */
.footer {
background-color: #49484C;
}
.footer a {
color: #E8E5F2;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
}
.footer ul {
list-style-type: none;
}
please rename class container on your script HTML.
Before:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
After:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
and I also changed a little in class "jumbotron" you, hails like this:
.jumbotron {
background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0);
height: 500px;
text-align: center;
}
Result : Here on jsfiddle
Hope that helps.
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...)