bootstrap: same html is not rendered correctly - html

I have 2 bootstrap ul's and one is beautified and the other one is not, my problem is why the first ul is not rendering correctly is is not beautified , what is wrong ? How you can see in fiddle example in second ul which is the same with first ul nut beautified te spaces are added correctly...
Same html but not beautified
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Same HTML but beautified is render correctly
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item">
<span>/asdasd</span>
<span class="label label-primary">GET</span>
<span class="label label-primary">html</span>
<span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Here is a small js example:

White-spaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element. So give space or enter the span in new line to get expected result
Try like this:
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
</li>

could be due to your code structure. if you structure the top one like the bottom one then it should work
http://i.imgur.com/3v4M7Lw.png
heres a screen shot of what i changed

Continuous html markup like in the first example removes the space between elements.
The second example has spaces in the markup which leads to proper aligned buttons.

Related

How to use container parameter with Bootstrap popover plugin

I basically have a button group with one button that is sometimes disabled ("Corpus delicti"). In the case it is disabled I want to show the user an explanation via a popover.
Since disabled elements require wrapper elements I wrapped a div around the button - what messed the styling up.
So I followed Bootstrap's hint "to specify the option container: 'body'" but styling is still messed up.
This is the markup, find it also in this fiddle:
https://jsfiddle.net/7ben7zmg/
<div class="btn-group" role="group">
<button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
<div class="btn-group" role="group">
<div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
</div>
Corpus delicti <span class="caret"></span>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>
Have no clue what I can do. Please help.
Apply data-toggle:popover in the btn-group instead of wrapping in other div..
Wrapping to another div will disturb your layout..
Updated Fiddle

Remove a tag text style inside span

How can I remove the a tag style / link style inside a span?
Code:
<button type="button" class="btn btn-danger btn-lg no-border" id="foo">
<a href="#">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</a>
</button>
You could remove the "link style" by removing the anchor tag which shouldn't be there anyway..
<button type="button" class="btn btn-danger btn-lg no-border" id="foo">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</button>
I think your code should look this this:
<button type="submit" class="btn btn-danger btn-lg no-border" id="foo">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</button>
or this:
<a href="#" class="btn btn-danger btn-lg no-border" id="foo">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</a>
You cannot put an a tag inside a button.
If you want to remove the styling of the anchor tag, you can simply target it in your css. Like so:
<style>
a{
text-decoration: none;
/* other styles here */
}
</style>

Anchors don't work in Internet Explorer 10

Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.

How to implement <a> tag in bootstrap button

Demo JS Fiddle:
I can't implement the href into the buttons.
It will work if I put it this way :
<a href="/">
<button type="button" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</button>
</a>
But this will result in this mess :
Is there any simple way I can fix this? Thanks alot!
Apply the btn class to the a instead.
<a href="/" class="btn btn-default" ...
Also take a look at the docs.
I updated your fiddle for the buttons to work properly:http://jsfiddle.net/ettmujvg/9/
<a href="#" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</a>

How Do I Make Glyphicons Bigger? (Change Size?)

I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do this?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
Increase the font-size of glyphicon to increase all icons size.
.glyphicon {
font-size: 50px;
}
To target only one icon,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
Fontawesome has a perfect solution to this.
I implemented the same. just on your main .css file add this
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
In your example you just have to do this.
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
If you are using bootstrap and font-awesome then it is easy, no need to write a single line of new code, just add fa-Nx, as big you want, See the demo
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Yes, and basically you can also use inline style:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
try to use heading, no need extra css
<h1 class="glyphicon glyphicon-plus"></h1>
For ex ..
add class:
btn-lg - LARGE
btn-sm - SMALL
btn-xs - Very small
<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>
<button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
Ref link Bootstrap : Glyphicons Bootstrap
I've used bootstrap header classes ("h1", "h2", etc.) for this. This way you get all the style benefits without using the actual tags. Here is an example:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>