Vertical alignment in bootstrap header - css

I know I can do this with a bunch of manual CSS, but am wondering if there's a Bootstrap way to do it.
The Bootstrap site says I can, "create lighter, secondary text in any heading with a generic <small> tag or the .small class." So I try this in an <h1> element, but the vertical alignment goes off as soon as I try floating it to the right:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right">and smaller text</small></h1>
</header>
</body>
I've also tried putting both items in columns (e.g. .col-md-6) but this also uses floats, so has the same result. Any easy way to do this?

You should use external CSS styles... but if you really really REALLY want to use only build-in bootstrap classes i have something funny for you! Check this out:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading
<small class="pull-right">
<h1 class="media">
<small>and smaller text</small>
</h1>
</small>
</h1>
</header>
</body>
This is NOT a good solution. This is just a CURIOSITY.

EDIT:
Use em units instead, to address different displays:
.h1--small {
line-height: 1.7em;
}
.h1--small {
line-height: 1.7em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right h1--small">and smaller text</small></h1>
</header>
SOLUTION:
The computed value for your <h1> css property line-height is equal to 39.6px, so all you need to do is define the same value in your <small> tag:
line-height: 39.6px;
To check the computed values of your h1 element just go to dev tools, select your h1, click on computed tab on your top right and look for line-height;
CODE SNIPPET:
.h1--small {
line-height: 39.6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right h1--small">and smaller text</small></h1>
</header>
</body>

Playing around with Kamil's answer, I figured out how to get this working. Apply the .pull-right class to a block element and put the <small> element inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <div class="pull-right"><small>and smaller text</small></div></h1>
</header>
</body>

Related

How to vertically align a badge next to a multiline heading element's last line?

How can I vertically align a badge (which is smaller) vertically next to the h1 tag.
I don't want to put the span tag into the h1 tag for SEO reasons.
Right now it is aligned at the bottom. I want to have it in the middle.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
Expected result:
You can make the parent flexbox and then align-items: center;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div style="width:350px;" class="d-flex align-items-center">
<h1 class="d-inline" style="white-space: no-wrap;">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
Note: I've added white-space: no-wrap; to the heading to prevent it from wrapping
Otherwise, if that's cheating, you can use transform to position it 50% up from the bottom of the last row (so it also works for multiline titles)
.badge {
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
However, this transformation is based on it's own height, rather than the height of the parent, so it will break when the font size is increased.
You're probably best off adding the span to the h1 element as it will give you more control; I'm sure that Google is intelligent enough to understand that pattern.
Play with vertical-align
.badge.badge-secondary {
vertical-align: 0.7em;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>

Bootstrap problem with line-up of left sidebar & page content

I'm trying to convert an existing site (and make it responsive) using Bootstrap (4.3.1) - and learn Bootstrap as I go through it.
I have a top-Nav
then a middle portion - containing:
a Sidebar (on the left)
& page content on the right
then at the bottom a Footer.
But try as I might (& I've spend 2 days reading Bootstrap's examples, & Stack Overflow Qs) - I can't get the middle section to be same width as, and to line-up with, the header - without ridiculous amounts of css.
I'm sure/hopeful? there's a easy way ;) What am I not doing/doing wrong?
Here's my code (inline code/colors just to help me see where elements are)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body color="pink">
<!-- Page container -->
<div id="HomePage"class="container">
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
<!-- Middle Section of the Page page -->
<div class="container w-100 p-0">
<div class="container row w-100 p-0">
<!-- Start of left Sidebar -->
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
</div>
<!-- Page Footer -->
<nav class="navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</div> <!-- End of Page container -->
</body>
</html>
PS - Rationale: I need the middle portion full width, as on some pages there are images at top-right of the page that should line-up with right-hand edge of header,
And the sidebar contains full width images, with almost no padding etc.
Just wrap each section of your website into a different row and then set grid columns to their inner divs, using col. Like so:
<div id="homePage" class="container">
<header class="row">
<nav class="col navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
</header>
<div class="row">
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
<footer class="row">
<nav class="col navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</footer>
</div>
Add width:100% to the middle section. That should stretch the div to occupy 100% of the parent (in this case the container's) width which is also the same as the headers width

Footer fixed bottom with header and Bootstrap

I'm using Twitter Bootstrap 3.3.1, with the template "Jumbotron".
Here, my page :
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<!-- content -->
</div>
</div>
<div id="root" class="container">
<div id="main" class="row">
<section id="content">
<!-- content -->
</section>
</div>
<footer>
<!-- content -->
</footer>
</div>
On the browser, the header (the div with role "navigation" + div with class "jumbotron") has a 290px size.
When I'm trying to push the footer at the bottom with all what I found, I have always the same problem. The "root" and "main" div will always be longer than the screen display because of the header, I guess.
A lot of internet's solutions don't include a header... :(
I don't want to fix the footer with a "position:fixed", I realy want to push it at the bottom with CSS only.
To be more specific, my footer has to stay at the bottom of the page with or without content. If the content is sorter than the screen, the footer will be at the bottom of the screen. If the content is longer than the screen, the footer will be at the end of the page.
EDIT: I don't want to do it WITH Bootstrap. I just want some CSS to do it without Bootstrap if Bootstrap can't do it !
I hope it's clear enough.
If someone has an idea, it'll make my day!
Thanks.
Bootply Example
Did you try this?
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<!-- content -->
</div>
</div>
<div id="root" class="container">
<div id="main" class="row">
<section id="content">
<!-- content -->
</section>
</div>
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
</footer>
</div>
Also if this isn't what you're looking for, edit your question and try to be more detailed.
EDIT
OP is looking for the navbar-static-bottom, which renders the footer at the very bottom of the page REGARDLESS* of page content/height. The only issue is, this class has not yet been added to bootstrap. It's in the list of commits, but has yet to be reliably implemented.
Commit Log for Bootstrap
See this document on the status of navbar-static-bottom class. As of right now, there is not reliable way to do this in Bootstrap.
In bootstrap you can style your footer with the class of
navbar-fixed-bottom
A default footer might look something like this:
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<div class="container">
...
</div>
</nav>
Have you looked into these examples?
http://getbootstrap.com/examples/sticky-footer/
or
http://getbootstrap.com/examples/sticky-footer-navbar/
This is my favorite:
http://www.cssstickyfooter.com/
It's been working like a charm for years.
Hope this helps!
So you want to keep the footer at the bottom of the page with css, you could just do:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
bottom: 0;
}

How to clear floats properly in twitter bootstrap?

I've just started learning twitter bootstrap and I was wondering what the correct method is to clear floats with it.
Normally I would just do something like this:
HTML:
<div class="container">
<div class="main"></div>
<div class="sidebar"></div>
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
.main {
float: left;
}
.sidebar {
float: right;
}
Please ignore the infrastructure of the above as it's just an example.
Now say in bootstrap if I am trying to float some text next to a nav section what is the correct way of doing that?
Consider this example in bootstrap:
<div class="main_container">
<header id="main_header" class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
</nav>
<div class="contact">
</div>
</header>
</div>
I am wanting to float the contact field next to the navbar field.
I have read about bootstrap's .clearfix class, do I just apply this as I have done above (after the floats)? ....or should I apply the class to something else?
You need to utilize the proper bootstrap classes. If inside a container (a true Bootstrap container), you need a row to offset the padding.
<div class="container">
<div class="row">
<header id="main_header" class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
</nav>
<div class="contact pull-left">
</div>
</header>
</div>
</div>
Bootstrap has pull-left and pull-right already to float content. clearfix shouldn't be needed if you are utilizing a container/row.
Realistically you could also (or instead) use the grid utilities on the nav/contact.

How to stop container appearing under header using bootstrap

I'm building a rails app right now using bootstrap for the UX. I need help figuring out how to keep the container class from appearing under the navbar. This is what the html for the page looks like:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<span class="pull-right"> Title text goes here </span>
</div>
</div>
</header>
<div class="container">
<%= yield %> <br / >
</div>
The only CSS on the page is css from bootstrap.
look at bootstrap samples, maybe you need to add style for the body:
body {
padding-top: 40px;
}
Any particular reason you need the div with the "container" class inside of the "navbar-inner" div? I would suggest changing the class of that to "brand", ditching the span, and putting your title text inside that brand div, like so:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="brand pull-right">Title text goes here </div>
</div>
</header>
Bootstrap can be picky about how various classes are nested and you should follow the same structure as outlined in the documentation:
http://twitter.github.io/bootstrap/components.html#navbar

Resources