See the following example:
<div class="row">
<div class="col-2">
<p>Error</p>
</div>
<div class="col-8">
<div class="progress error" data-toggle="tooltip" data-placement="bottom">
<div class="progress-bar error-bar" role="progressbar"></div>
</div>
</div>
<div class="col-2">
<a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text">
<i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"></i>
</a>
</div>
</div>
The text "Error" is not vertically aligned properly with the prograss bar and font awesome icon. I tried adding vertical-align: top to <p> but it did not make a difference. How do I correctly vertically align the text?
You can add line-height: 1rem; to <p>
Try to add the class align-items-center to your row, this will make all cols vertically aligned in the center of the row.
If you have any question about the Bootstrap grid system, check out the documentation, that's pretty good by the way.
The property vertical-align only applies to inline and table cells elements, check out the MDN documentation about that. So, vertical-align will only work if your <p> element is an inline element, and if has enough height to be aligned.
Related
I want the icon to appear centered horizontally and vertically behind the text.
I have tried numerous combinations of position:absoulute, position:relative, z-index, display:flex, but have not been able to acheive the wanted effect.
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="border rounded p-3 mb-4 overflow-hidden" style="height:200px;">
<span class="fas fa-user-tie fa-3x fa-fw text-secondary"></span>
<strong>Header</strong><br />
Text text text text, etc.<br />
</div>
</div>
You will have to give the parent container a position:relative for the children's position:absolute to work. Then wrap your icon in a different span to your text and make the positions absolute.
Eg; https://jsfiddle.net/L9cb8wao/
My fiddle is extremely rough, so apologies about that, however there should be enough there for you to fix your code accordingly to achieve what you're after.
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 want to format this so that the link wraps to a second line and the delete stays vertically centered in the well, rather than the delete dropping down to get out of the way, as it is in the fiddle below. Nothing I have tried so far has worked, but I'm admittedly pretty poor with CSS.
Code:
<div id="listing_10" class="well">
Words words words words words words words words words words words
<span class="pull-right">
<a style="text-decoration: none" class="delete_listing" href="#">
<i class="fa fa-lg fa-times-circle danger"></i><strong class="danger" style="vertical-align: middle"> Delete</strong>
</a>
</span>
</div>
Here's the jFiddle http://jsfiddle.net/ohbnkok8/4/
Note:
The text of the link will be at most 50 characters.
Are you looking for this???
Add few CSS
a {display: inline-block; max-width: 80px; vertical-align: middle;}
I ended up using the bootstrap grid system to make things work. The delete button isn't centered, but it is always even with the top line, which for the typical 1 line case that I'll be seeing will make it centered, and still looks nice when there are 2 or 3 lines.
<div id="listing_10" class="well">
<div class='row'>
<div class='col-md-9 col-sm-8 col-xs-7'>
Words words words words words words words words words words words
</div>
<div class='col-md-3 col-sm-4 col-xs-5 text-right'>
<a style="text-decoration: none" class="delete_listing" href="#"><i class="fa fa-lg fa-times-circle danger"></i><strong class="danger" style="vertical-align: middle"> Delete</strong></a>
</div>
</div>
</div>
See jsfiddle http://jsfiddle.net/ohbnkok8/12/
I have a UI where I display an icon with some text(on the right side) in the same row on a tile.
The problem here is that when I resize the screen, the text gets wrapped to the next line and even if I decrease text size, it still does not align next to the icon.
Can anyone help me out?
Here's a visual representation. This is when screen is full size:
And then this is what happens when it is resized:
How do I bring the text next to the icon like in the original size (full size)?
Here's the code for displaying the icon and text:
<div class="row">
<div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-md-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change col-md to col-xs
<div class="row">
<div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-xs-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change the cols to a single line, like col-md-12. Then apply the icon as a background.
Alternatively, use
<div class="col-md-2 col-xs-2">
and so on.
Depending on your layout, you may need to adjust the cutting points, so the first approach is always better and desirable
On my web page I have a centered logo/lead along with two divs below the logo/lead. I wish to make the divs seem centered in accordance to the logo/lead.
I have attempted to center the divs by using Twitter Bootstrap's spans but the divs are still not truly centered.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span4 text-glow-hover-with-delay">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
If you need more information you can take a look at the website: http://guru.jire.org
You can make them appear truly centered by changing the span4 to a span3 (odd-equality rule) and then setting the divs to align-center. Full source below.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
It may help to look at it this way:
The borders on the divs help you see what is happening, the diagonals show you where the true center is.
If you give the divs consistent widths they will look more symmetrical and centered, that may be all you need to get the look you want.