fixed top header to show on top of div - css

This code uses and bootstrap 3.
How can I get the span with class="badge" to vertically line up with the left cell content i.e. baseline with the menuItem? (I tried some text alignment for no avail ) Thank you
body {
padding-top: 70px;
}
//---main.html-------------------------------
<head>
<title>Tasks</title>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<header class="container">
<div class="row">
<h1>
<button class="col-xs-2" type="button">☰</button>
<label class="col-xs-8 text-center">Select item</label>
<button class="col-xs-2" type="button">⋮</button>
</h1>
</div>
</header>
</nav>
</header>
<div>
{{> mainMenu}}
</div>
</body>
//---main_menu.html-------------------------------
<template name="mainMenu">
<div class="container">
<div class="row">
<section class="col-xs-12">
<div class="list-group">
{{#each menuItems}}
<a href="#" class="list-group-item">
<img src="/abc.png">
{{menuItem}} <span class="badge">></span>
</a>
{{/each}}
</div>
</section>
</div>
</div>
</template>


If your list-group-items are fixed height the simplest way to handle this is margin css.
.list-item-group > span.badge {
margin-top: 20px;
}
Other vertical align tricks such as line-height don't work on badges because they already have specific styles.
Here is another possible related solution:
Vertically align Bootstrap 3 badge inside heading
Note: Your question does not actually relate to Meteor, you might have better luck getting answers if you remove the meteor templating from your snippet.

Related

Remove blank space from right of page [duplicate]

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

Remove Auto Added Wrappers In Joomla?

I have a layout that uses 100% height DIVs. When I add the footer however it jumps to the first DIV and floats somewhere around the middle of it. I looked at the code and it seems .articleBody and item-page are the parents of my children DIVs but according to the inspector only wraps the first DIV (all the DIVs are inside of container and the DOM tree has my 100% height DIVs as children).
I have tried using position absolute, giving the footer a height and trying to force it to bottom. It only forces it to the bottom of the first 100% height DIV.
My only thought now is if I can remove .articleBody and item-page to solve this problem? If they are only wrapping the first DIV maybe the .container-fluid would be the only parent and the footer can rest at the bottom. If anyone else has another solution, I'm all ears, I just need this issue fixed as it's dragged on for a while. For the record, I am loading Bootstrap 3 successfully.
Thank you!
HTML - INDEX.PHP
<div class="container-fluid">
<nav class="navbar" role="navigation">
<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="collapse navbar-collapse">
<jdoc:include type="modules" name="nav" style="html5" />
</div>
</nav>
<jdoc:include type="message" />
<jdoc:include type="component" />
<!--END CONTAINER-->
</div>
<footer>
<div class="container">
<div class="row footer-container footer-row">
<div class="col-sm-3">
<div class="footer-logo">Logo</div>
</div>
<div class="col-sm-9">
<p class="footer-about">
About
</p>
<p class="footer-text">
Footer content here
</p>
</div>
<div class="col-sm-3">
<p class="footer-about">
Contact Info
</p>
</div>
</div>
</div>
</footer>
HTML - IN CODE EDITOR OF THE AFFECTED PAGE
<div class="container-fluid">
<div id="landing-bkg">
<div class="row">
<div class ="col-sm-7 col-xs-12">
<h1>Headline</h1>
<h3>Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END LANDING BKG-->
<div id="another2">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Headline</h2>
<h3 class="center">Subhead</h3>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER2-->
<div id="another3-bkg">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class ="col-md-7 col-sm-12 col-xs-12">
<h2>Headline</h2>
<h3> Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END NESTED COLUMN -->
</div>
<!-- END NESTED ROW -->
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER3 BKG-->
<div id="another4">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Subhead</h2>
<form>
<input type="email" placeholder="Input Field" class="center-block">
</form>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- ANOTHER 4 -->
</div>
<!-- END CONTAINER -->
CSS
/****HTML & BODY ****/
html,
body{
width:100%;
height:100%; //Makes my DIVs 100% height, works great
margin:0;
padding:0;
}
/****CONTAINER ****/
.container-fluid{
height:100%;
}
/**** JOOMLA CLASSES I OVER RIDE TO GET THE DIVS AT 100% DOESN'T WORK WITHOUT IT ****/
.item-page{
height:100%;
}
div[itemprop="articleBody"]{
height:100% !important;
}
/**** FOOTER ****/
.footer-container{
background-color:#565A5C;
width:100%;
padding-top:50px;
padding-bottom:25px;
}
footer{
position:relative;
}
.footer-row{
width:100% !important;
margin:0 !important;
}

The only way I found is by changing the core code. It is very easy, but it is never good to change core files from Joomla.
The file is located:
/components/com_content/views/article/tmpl/default.php

bootstrap issue: image overflow

here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks

Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}

you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>

Aligning button and text in navbar in twitter bootstrap

I have written the following html with Bootstrap 2.3.2 included and no other css:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
(...)
<div class="nav-collapse collapse">
<ul class="nav">
(...)
</ul>
<form id="login-form" class="navbar-form pull-right">
<span class="navbar-text">Hello, username!</span>
<button id="logout" class="btn">Log out</button>
</form>
</div>
</div>
</div>
</div>
How can I make it so that the log out button aligns with the text and .navbar correctly? Currently the button sticks to the bottom of the line, which is the bottom of the .navbar because of the .navbar-text.
The problem can be viewed here.

You can reset the button's margin via CSS:
.navbar .btn {
margin-top: 0;
}

Twitter Bootstrap - full width navbar

Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?

Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">

Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.

Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>

Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>

You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>

Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.

You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container

To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}

I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}

You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>

Resources