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>
Related
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
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 have 2 buttons :
Download
Edit
I want to place both of them in same line, side by side, but not too far away from each other either.
As of right now this what I have
I try to give them class pull-left and pull-right
This what they come out to be
They're too far away. :(
I want them to look something like this.
Possible, with the vertical line in the middle.
I am not sure how to do that.
Here is my HTML Code
<p>
<span>
<a class="btn-1" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
Download
</a>
</span>
</p>
<p>
<span>
<a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
Edit
</a>
</span>
</p>
What should I do to get close to what I want ?
You had 2 <p> tags, combine them into 1.
Place them in the same <p> tag so that they will be in same line as you wanted.
Add style="text-align:center;" into your <p> tag.
Add a bunch of between them to maintain the spaces
For your vertical pipeline, just do this |
Try this
<p style="text-align:center;">
<span>
<a class="btn-1 pull" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
Download
</a>
</span>
<span>
<a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
Edit
</a>
</span>
</p>
Give a class on your <p> Example: <p class="some-name">
Put .some-name { display: inline-block; } in your stylesheet.
I would also suggest using better semantics for creating buttons.
Wrap the p tags with a container, and then you can add display: inline-block and margin. JSFIDDLE
<div class="buttons">
<p>
<span>
<a class="btn-1 pull" href="#">
Download
</a>
</span>
</p>
<p>
<span>
<a class="btn-2" href="#">
Edit
</a>
</span>
</p>
</div>
CSS
div.buttons p {display: inline-block;}
div.buttons p:last-child {margin-left: 20px;}
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