I have the below markup and the Preview anchor appears before the file name.
<div class="container">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
<span> </span>
<span>file1</span>
<a class="btn btn-default btn-xs col-xs-2" target="_tab" href="#">Preview</a>
</div>
Here is the jsfiddle:
https://jsfiddle.net/varungupta85/Luhcjs6r/5/
Could you explain why does the anchor appear before the span and how to fix it?
why does the anchor appear before the span
That's because the bootstrap class col-xs-2 has float:left which removes it from the normal document flow - before the span.
Regarding how to fix: One way: remove the col-xs-2 class from the anchor.
or alternatively make your own class... something like:
a.btn-default.col-xs-2 {
float: none;
}
Demo
Related
I have a row div which contains 1 div called horizontal-form, inside this horizontal-form contains other two divs, called form-group, and inside this form-group I have another div, called input-group which contains 1 a tag and 1 span text.I would like to align these span to the most right position. I tried to use class = pull-right but then it aligned to the right position but compared to the nearest div, here is the input-group. Can anyone show me how can I align the span to any position that I wish, for example here i would like to align it to the right position compared to the div row or horizontal-form
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="horizontal-form">
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
FirstItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
SecondItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
</div>
</div>
This happened beacause of "input-group" class as it has "display:table;" property in css.
So There is two ways to resolve this.
Remove this class
Overwrite css for this class as "display:block"
The thing you are asking its not the right way to do it as i see in your code because you are using bootstrap and bootstrap logic doesnt work like this. If you need your span align whatever you want dont put it inside the div with horizontal-form class and form-group class. In this case if i understood it well to align it right just apply float: right; to the span.
I'm trying to figure out how to place my <h4> tag and <button tag to be side by side.
Current Behaviour - Right now they are underneath my image and I want them to put in a horizontal position.
Required Behaviour - I want the <h4> to be side by side with the image and the <button> side by side with the <h4>.
I tried floating to the right and display blocks, but the elements are still underneath the image and one another.
Codepen Link
Browsers by default typically display header elements as block. Use inline-block to not have it be in it's own line.
HTML
<h4>title</h4>
<button>button</button>
CSS
h4 {
display: inline-block;
}
DEMO: http://codepen.io/anon/pen/bVPXOK
Maybe
<h4 style="display:inline-block;">
heading
</h4>
<button> submit </button>
?
I saw your codepan the real problem was that your button was outside the right div that is why it was not aligned next to <h4>. I have edited the code (Updated Working Codepan)-
Modified CODE
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
</div>
instead of this (your previous code) -
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
</div>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
and to align both <h4> and <Button> next to image you have to change your css and add display: inline-block !important; like this (Updated Codepan with image alignment) -
CSS
/* Hotel Search Panel */
.hotel-img {
display: inline-block !important;
width: 250px;
}
Another option you can use is the "float-right" class. If you nest your button in the h4, it can be accomplished like so:
<h4>Title<button class="float-right">My Button</button></h4>
Hope that helps!
I know there is tons of questions (1,2,3,4,5) about inline elements I couldn't make it.
In Twitter Bootstrap I have an alert row, but the bell icon in right side isn't vertically aligned with the text in left side. Icon appears lower than the text. I tried vertical-align:middle; .row line-height etc. I also need the solution be responsive in mobile screens.
You can see my tryouts in fiddle: http://jsfiddle.net/mavent/DdLED/37/
<div class="alert alert-warning ">Today many things happened <span class="badge badge-info">121</span>
<div class="pull-right"><a class="btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="glyphicon glyphicon-bell"></i></a>
</div>
</div>
Edit: Solution:
I solved issue like the example 8 in fiddle: http://jsfiddle.net/mavent/DdLED/45/
Would this work for you? (I know, a bit of a hack)
[ CSS ]
.bring_it_up {
margin-top: -3px;
}
[ HTML ]
<!-- part 8 -->
<div class="alert alert-warning border2 "><span class="border">Today many things happened Part 8</span><span class="border badge badge-info">121</span>
<a class="bring_it_up no_padding pull-right btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="no_padding glyphicon glyphicon-bell"></i>
</a>
</div>
I now I can't set the width of a div that's being displayed inline, but how would I do something similar?
I have a series of labels that I want to be all aligned to the right. Some of the labels have icons to their right, these all must be aligned as well. But the issue is that the labels that don't have icons to their right end up being un-aligned.
HTML:This is a label next to an icon
<div class="span2 pagination-right workspec-status-container">
<span class="label wip">WIP</span>
<a href="javascript:void(0)" class="btn btn-icon" data-html="true" data-
target="#workspec-popover-31" data-toggle="popover" data-original-title="" title=""><i
class="fam information"></i></a>
</div>
This is a label without an icon
<div class="span2 pagination-right workspec-status-container">
<span class="label not-started">Not Started</span>
</div>
In some selector that will affect the desired div, add the following:
display: inline-block
Regards,
Guillermo
I'm ussing bootstrap and want to have in the header of a section a link (button) to edit it (like wikipedia [edit] section links).
This is what I have, but its bad aligned (the button is below the text):
<h3>
<span>Details</span>
<span>
<a class="btn pull-right" href="/edit">Edit</a>
</span>
</h3>
Is some better way to handle this? (I'm almost sure that I missed the path)
The align problem was because I was adding the pull-right class (floating) directly to the button, instead of that I have to float a wrapper.
<h3>
Details
<span class="actions">
<a class="btn" href="/edit">Edit</a>
</span>
</h3>
then, I need to add:
.actions {
float: right;
}
And the button align properly as it is not floating anymore.
This is the working fiddle.
Try this:
<h3>
<span>
<a class="btn pull-right" href="/edit">Edit</a>
</span>
<span>Details</span>
</h3>