Aligning Floated Content - html

I'm using the Twitter Bootstrap toolkit to style my site. I'm implementing a split button dropdown with markup similar to the following.
<div class="btn-group">
<a class="btn btn-small btn-info" href="#">
Add New Provider
</a>
<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
</ul>
</div>
This works as intended; however, I would like to align the entire button to the right. But the btn-group and btn classes are both floated left so any text alignment is ignored.
If I knew the total width of the button, I could set the outer <div> to that width and align the entire <div> in a parent <div>. But I don't know the total width.
Is there any way to align this content to the right, without reworking the underlying Bootstrap classes?
Note: I've posted a jsFiddle demo

I can't guarantee this will work on your specific use-case (because I haven't tried it for myself, and I don't know exactly what markup and CSS you're using), but this does work on your jsFiddle demo:
.panel-container {
display: inline-block;
text-align: right;
}

jsFiddle solution
I recommend using left/right padding instead of using text-align, although both will still work, regardless if they're being floated or not. What matters is that their widths are declared width: auto.
If you don't want to modify the core Bootstrap files, you can use the same classes in a separate stylesheet and override the styles from Bootstrap instead. Just ensure that the separate, personal stylesheet is called after Bootstrap. For example...
in bootstrap.css:
.input-mini {
width: 60px;
}
in your personal-stylesheet.css:
/* Redefine the same style
declared in Bootstrap */
.input-mini {
width: 40px;
}
in your header:
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="personal-stylesheet.css" />

This was fixed in bootstrap 2.0.2. Use the bootstrap class "pull-right"
https://github.com/twitter/bootstrap/issues/2045
http://jsbin.com/ebemiz/2/edit#html,live

Related

Bootstrap control changes position height based on width of screen

I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<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-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/

How do I center text in a span?

Please see this website
How do I get the test TEST to be in the middle of the span it is contained in?
This is using Twitter Bootstrap.
I have tried loads of different ways, like css, inline styling, setting margins, etc but I cannot get the span to do what I need. It appears as though its being drawn to the exact width of it's text.
My main aim is actually to be able to bring the text Nationwide Alerts down so that it is on the same row as the buttons.
The tricky thing is that I cant give this span a hard coded width because of the page being resized
Paul
Just adding that you can now simply use css flexbox to position text inside any element including spans.
The original link is no longer working, but this should center the text horizontally regardless of the size of the element.
span { display: flex;
justify-content: center }
If you want to align vertically, use align-items: center
Put a background color on the span to see why it isn't working. Those three items are in a div with no CSS associated with it. In order for the span to be in the middle, you need the div that surrounds it to, at the very least, have width & text-align properties.
Change
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
<div class="centerTest">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
with whatever name you want & use
.centerTest {
width:100%;
text-align:center;
}
Additionally, with this markup, your code as is will cause the span to center, but you would have to add float:left to your btnPrevious id. I would refrain, as much as possible, from using inline CSS unless you are designing HTML email, so just create a CSS file that you include LAST in your list of CSS files and add your edits to there.
For example, if btnPrevious is in your template's CSS file, in YOUR CSS file, just add
#btnPrevious {
float:left;
}
and you're good.
EDIT:
Sorry missed the Bootstrap part as I just did a search for TEST inside your code. Bootstrap is built with these classes, and being that those are already inside of a container, you should be able to add text-center to the blank div and it should do the trick
Change
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
<div class="text-center">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
Spans are, as you suspected, drawn to the exact width of it's text. You can circumvent this by setting it's style to display: block; width: 100%;, or any width you would like. This will mess up everything in your case, since you have other elements before and after the span itself.
Therefor you'll need to in addition set it's position to absolute.
Using bootstrap 2.3.0, there is a .text-center class you can use 3
<span class="text-center">...</span>
and a pagination-centered for bootstrap 3
<span class="pagination-centered">...</span>
You can also use
margin-top: auto;
margin-bottom: auto;
Or if using TailwindCSS my-auto

Center <span> between two <button>'s

I am working with bootstrap v3 and trying to center a <span class="badge">1</span> between two buttons, one of which uses the pull-right class.
The exact html looks as follows:
<button type="button" class="btn btn-success">Decient</button>
<span class="badge">10</span>
<button type="button" class="pull-right btn btn-danger">Garbage</button>
However this results in the following:
I would like to have the 10 centered but have not been successful. I have tried pagination-centered, text-centerand custom CSS to no avail. Also to provide some additional context, this is in the caption div of a thumbnail.
The following provides a basic scenario of my situation: http://jsfiddle.net/vvA78/1/
It is bootstrap, just use text-center on house-container div and pull-left on btn-success.
JSFiddle
To center vertically just add margin-top.
JSFiddle
Of course do not follow the example and don't set margin-top to the entire .badge class.
.badge is probably an inline element. If you make it an inline-block or a block element, you can center it relative to the parent.
try this:
.badge { display: inline-block; margin: 0 auto; width: 40px; }
If it does not work, I'd need a fiddle or a link.

Width: 100% is not quite 100%

I have set an element's width to 100%, but the border is not going all the way to the edge of the page, It leaves maybe a two-pixel gap each side of the line.
Here is my HTML:
<body>
<div class="headerContainer">
</div>
</body>
Here is my CSS:
.headerContainer{
border-bottom:black 2px solid;
height:40px;
width:100%;
color:blue;
}
Also, another question. I came across this code while looking through a website:
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<h1 class="brand">Legend!</h1>
<nav class="pull-right nav-collapse collapse">
<ul id="menu-main" class="nav">
<li><a title="portfolio" href="#products">Out Products</a></li>
<li><a title="services" href="#services">Services</a></li>
<li><a title="news" href="#news">News</a></li>
<li><a title="team" href="#team">Team</a></li>
<li><a title="contact" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
</div>
And I cannot think of any reason to have that many div tags, Wouldn't one--or possibly two--do fine?
And a third question: if I have a div tag within a div tag, How will I reference it in CSS?
The body element has a default margin. Add this:
body {
margin:0;
}
and your space goes away.
jsFiddle example
And there's no real answer to your second question. The structure can depend on numerous things.
Finally, to refer to a div in a div with CSS use div div {...} to target any descendant divs of a parent div, or div > div {...} to specifically target the child div of another div.
1) Include a CSS Reset. The few pixels of space on the edges are most likely due to some kind of padding or margin on the html, body or wrapper element(s). html, body { margin: 0; padding: 0; } would also probably fix it.
2) There is probably not a need for that many nested div tags in the code you pasted, but it's hard to say without knowing the functionality (there is probably a lot of javascript involved in how that navigation works). Even so, that code can probably be significantly improved / simplified.
3) You can reference a div tag inside of a div with the CSS selector div div { } which selects all div tags that live inside at least one other div tag. div > div { } by contrast would only select div tags that are nested immediately inside another div as a direct child.
try adding this line at the top of the css:
*{
padding: 0;
margin: 0;
outline: 0;
}
Add body {margin: 0;} to your CSS. Body has a margin by default, and you need to remove it. Adding padding: 0; or outline: 0; (as suggested in another answer) is not necessary.
Sometimes you will need extra containers in your HTML code to apply CSS to separate parts of your content. One example is when you want to have a sticky footer at the bottom of your page be separate from the rest of your page's CSS rules.
Not exactly sure what you mean by your question, but you can select children of elements a number of ways. Without giving an example, you can try parentelement > childelement for immediate children.
2) The large amounts of DIV's in your example probably comes from Twitter Bootstrap. I would claim that by the use of many divs and lots of separated CSS classes Bootstrap becomes a flexible CSS framework. Useful in different layouts and good for quick mockups.
You can definitely remove alot of of the divs and combine many of the css classes, and then you have made a custom-made html/css solution that suits your meny... and menues very similiar to yours.

twitter bootstrap affix resizes div element

I am using twitter bootstrap , below is a certain portion of my code . Whenever the affix gets applied after scrolling down , the whole div resizes . What am i doing wrong ?
<div class="mythumb" data-spy="affix" data-offset-top="90">
<img src={$profimg_src} style="width:100%;" data-src="holder.js/300x200"/>
<div class="caption">
<h5>{$firstname}{$middlename}{$lastname}</h5>
</div>
<div class="btn-group">
<button class="btn" id="subscribe">Subscribe</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>Subscribe To All posts</li>
<li>Subscribe To Ideas Only</li>
<li>Subscribe To Posts Only</li>
</ul>
</div>
</div>
When using affix, the JS will add the class of affix to the div that its spying on once you have scrolled 90px (in this case).
When it does this it takes the div out of normal flow so you typically have to create a new style for the the affixed div.
Something like this is a start:
.mythumb.affix{
top:50px;
margin: 0 auto;
width:940px;
height:200px;
}
You might also have to specify z-index and position values. I don't know what your current page looks like, so the CSS above is just a guess. Once you understand that the root cause is because the affixed div has been taken out of normal flow, you can usually restyle it to suit your purpose.
Hope this helps!