I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:
+-----------------------------------------------------------------+
| Hello Thank you for visiting [logo] |
+-----------------------------------------------------------------+
Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<span class="navbar-brand">Hello</span>
<span class="center-block"><span class="center-text">Thank you for visiting</span></span>
<span class="pull-right"><div class="pull-right">[logo]</div></span>
</nav>
Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.
I'm not sure what I"m doing wrong.
I'm not sure why you are using nav but this solution might work for you:
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<p>Hello</p>
</div>
<div class="col-sm-4 text-center">
<p>Thank you for visiting</p>
</div>
<div class="col-sm-4 text-right">
<p>[logo]</p>
</div>
</div>
</div>
Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.
<footer class="navbar navbar-static-bottom navbar-default">
<div class="container" style="width">
<div class="navbar-header">
<div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
Hello
</div>
</div>
<div class="navbar-header">
<div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
Welcome to my website
</div>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-brand">
Logo goes here
</div>
</div>
</div>
</footer>
Enjoy....!
Related
This question already has answers here:
Bootstrap 3.3.7 "row" causing horizontal scroll bar
(7 answers)
How to make bootstrap 3 fluid layout without horizontal scrollbar
(21 answers)
Closed 4 years ago.
I made a page with Bootstrap 4 and there's a white space on the right.
I have everything except the nav bar in a div with class col. I didn't put the rows and cols inside a container div because Bootstrap documentation suggests going without it for an edge-to-edge design. (I tried putting them inside a container-fluid div and the gap was still there).
Since col adds 15px on the right and left, I also tried the following, and it didn't remove the gap:
.col {
padding-right: 0 !important;
padding-left: 0 !important;
}
CodePen
There is no need to overwrite bootstrap classes. Use the inbuilt utilities class to overwrite if you have to. Since hero image has to be edge-to-edge you can use p-0 to remove the padding. In footer also you are missing the row-col structure. and wrap your content inside container-fluid as shown in example below.
Try this
Check Demo HERE
HTML
<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">
<!-- Navbar Content -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="hero-image">
<div class="hero-text text-white">
<h1>NC</h1>
<h5>Web developer</h5>
<form action="mailto:email#gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark btn-top btn-contact">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row about">
<div class="col">
<h2>About</h2>
<!-- Content -->
</div>
</div>
</section>
<section id="portfolio">
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<!-- Content -->
</div>
<!-- End of row div -->
</section>
<section id="contact">
<div class="row contact">
<div class="col center-block">
<h2>Contact</h2>
<p>Have a question or want to work together?</p>
<!-- Content -->
</div>
</div>
</section>
<div class="footer bg-dark row">
<div class="col">
<!-- Content -->
</div>
</div>
</div>
try this
.col{
padding: 0 !important;
}
.row{
margin-left: 0;
margin-right: 0;
}
this is why I hate using bootstrap, since you have to use !important to override bootstrap default style. it even worse using themes based on bootstrap, since its already using !important to override bootstrap style, and you want to override it again
All you need to do is wrap all row in container-fluid like this
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
</div>
</div>
</div>
</div>
<section id="about">
<div class="container-fluid">
<div class="row about">
<div class="col">
</div>
</div>
</div>
</section>
same you will have to do in portfolio and contact
Using bootstrap, the content within the rows is breaking out into the ones above and below. How can I secure the content so that the styling rules apply as they should?
HTML
<div class="row home">
<div class="hero-unit">
<div class="container">
<div class="container hero-header">
<h2>Good lorem catchphrase, here</h2>
<p>This text should sit under the header above, but in mobile, it and the header and buttons within this row should be centered. </p>
<button type="button" class="btn btn-ghost pull-left">contact us</button>
<button type="button" class="btn btn-ghost call-us">call us 24/7 <i class="fa fa-phone"></i></button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="row hero-family">
<div class="col-sm-12 col-md-6 col-lg-12">
<div class="container blurb">
<h1 class="header">All for the family</h1>
<p>This is just more filler text for this space in place of what will eventually go here. This should be centered above the people and button below, while the content above should not flow into this space when downsizing.The image below should maintain
its position at the bottom of the row and not come up when resizing either.</button>
</div>
</div>
</div>
<div class="row hero-family">
<div class="family-image"></div>
</div>
<div class="row we-can-help">
<div class="container">
<h1>We are here</h1>
<p>This content shouldn't break out of its row either, but still manages to. Not a good thing!</p>
</div>
</div>
JSFIDDLE: LINK
This is how it should look
Below 992px, it then starts looking like this:
Notice the image comes away from the bottom of its row and the collision of content between rows.
when I change the page,in the first page has bottom navbar and in the second page do not has bottom navbar.When I from the second page the first page ,the bottom navbar is show ,but has nothing
<div class="navbar navbar-app navbar-absolute-top" ui-yield-to="headNavigation"
ng-if='headNavigationShow' style="background: #C20404;padding-top:20px;height:65px;">
<div class="btn-group pull-left" ui-yield-to="leftHeadNavigation">
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="centerHeadNavigation">
</div>
<div class="btn-group pull-right" ui-yield-to="rightHeadNavigation">
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom" ui-yield-to="footNavigation"
ng-if='footNavigationShow'>
<div class="btn-group pull-left" ui-yield-to="leftFootNavigation">
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="centerFootNavigation">
</div>
<div class="btn-group pull-right" ui-yield-to="rightFootNavigation">
</div>
</div>
<!-- App Body -->
<div class="app-body">
<div class="app-content" style="margin-top:13px;">
<ng-view></ng-view>
</div>
</div>
this is the first page,it has the bottom navbar and has the menuthis is first page ,back from the second page ,the bottom navbar has nothing
the first page's bottom navbar has nothing ,because of the the bottom navbar has the.
<div ui-content-for="footNavigation" ng-if="$parent.headNavigationShow">
<footnavigation-directive info="{{foot_navigation_position}}"
</footnavigation-directive>
</div>
like this use ng-if to contol the load order.
I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->
I'm using Twitter Bootstrap (latest version - 2.3.2) for a site I'm building, and want to achieve the following while keeping the site responsive, and also applying best practices for it.
Here's a very rough sketch of what I want to have:
The site has a basic header with fixed navbar, a content-fluid div which has three inner divs: a span5, span6, and span1 (for a total of 12 columns). After the content div, a sticky footer with company/copyright info and such.
The problem I'm having is with the span1 column. It is basically decorative (it has 4 vertical color bars, sized at 25% width each), but I'd like to have:
Social link icons vertically-centered in the column (Twitter, Facebook, LinkedIn, etc), as shown by the black boxes.
Text rotated 90 degrees counter-clockwise inside each colored bar. It's only one word each, and is not a priority.
Each bar stretching to fill the full height of the parent container (in this case, the content div), since the height of the page is currently set by the highest div, whether it's span5 or span6.
I know there are probably lots of ways to achieve this (pure CSS, javascript, background-image tiling), but I'm looking for the best practices: avoiding extra markup, using right techniques, in order to learn as much as possible. I've tried setting the parent container (and inner bars) to height: 100%; and playing with min-height as well, but min-height doesn't (seem to) work with percentages.
Any help and/or constructive criticism is very welcome.
Edit: JSFiddle and full code added: JSFiddle
Also, link to the original site (in case JSFiddle screws something up): Original page
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button> <a class="brand" href="#">Geología y Telecomunicaciones, C.A.</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Inicio
</li>
<li>Acerca de
</li>
<li class="active">Contacto
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row-fluid content clearfix" style="margin-top: 60px;">
<div class="span5">
<div class="row-fluid">
<div class="span5">
<div class="span12 logo"></div>
<div class="sidebar-intro">Construcción, Adaptación,
<br/>Adecuación y Remodelación
<br/>de <span class="emphasis-red">
locales<br>comerciales<br>empresariales
</span>
</div>
</div>
<div class="span7">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&output=embed"></iframe>
<br /><small>Ver mapa más grande</small>
</div>
</div>
</div>
<div class="row-fluid">
<div class="contact-wrapper well">
<form>
<div class="control-group">
<label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
<div class="controls controls-row">
<input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electrónico</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre#sudominio.com">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
<div class="controls">
<textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Enviar Mensaje</button>
</div>
<br class="clear">
</div>
</form>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid span12">
<img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
</div>
<div class="row-fluid">
<div class="row-fluid span12 address"> <address>
Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
</address>
</div>
<div class="row-fluid e-mail">
<div class="span4 offset6"> direccion#geotelca.com
</div>
</div>
</div>
</div>
<div class="span1 social-links">
<div class="row-fluid vertical-bars">
<div class="span3 bar bar-lightblue"></div>
<div class="span3 bar bar-purple"></div>
<div class="span3 bar bar-orange"></div>
<div class="span3 bar bar-lightorange"></div>
</div>
</div>
</div>
</div>
<!--/.container-fluid-->
<div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
<div class="container">
<p class="muted credit">Diseñado, codificado y mantenido por #kenshin23
</p>
</div>
</div>
I would say your best bet here would be one of the jQuery plug-in out there to accomplish this ... eqHeight.coffee seems to be pretty well documented:
https://github.com/jsliang/eqHeight.coffee/
As for centering those social links in that vertical space, you'd likely have to use more Javascript to do that. Although, honestly I'd probably put them in a div container with position: fixed; and let them slide up and down that column as the user scrolls.
EDIT:
Just noticed you added your HTML file ... in the case of the first plug-in I linked to, you would need to add a class (perhaps 'eq-height') to each of the columns whose heights you wanted to match (that first outer span5 and span6 and then all the bar column divs individually). Then on jQuery document ready, use:
$(document).ready(function() {
$(".content").eqHeight(".eq-height");
});