In Bootstrap 3, I want to have an icon centered to the left of an H6 and some text.
Here's my code:
<div class="row">
<div class="col-sm-8">
<div class="pull-left"><i class="fa fa-life-ring fa-3x"></i></div>
<div class="pull-right">
<h6>Unlimited Support</h6>
We're here to help! Just ask away...
</div>
</div>
</div>
It looks like this right now (icon is above the text, rather than on the left):
How do I get it to format correctly?
This code:
<div class="row">
<div class="col-sm-8">
<div class="pull-right">
<h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
We're here to help! Just ask away...
</div>
</div>
</div>
Displays like this:
But, I want to put the icon beside both lines of text (have the "We're here..." move to the right/not wrap underneath.
you can try this
jsFiddle Demo
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
If it's Bootstrap you could do something like this:
<div class="row">
<div class="col-md-2">
<i class="fa fa-life-ring fa-3x"></i>
</div>
<div class="col-md-10">
<h6>Unlimited Support</h6>
We're here to help! Just ask away...
</div>
</div>
Try this-
<div class="row">
<div class="col-sm-8">
<div class="pull-right">
<h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
We're here to help! Just ask away...
</div>
</div>
</div>
Alternatively, you can try this (if you do not want your text pulled to the right).
<div class="row">
<div class="col-sm-8">
<h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
We're here to help! Just ask away...
</div>
</div>
you can add put the text "We're here to help!..." in a span and give it some padding or margin on the left.
<div class="row">
<div class="col-sm-8">
<div class="pull-right">
<h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
<span class="text-on-the-right">We're here to help! Just ask away...</span>
</div>
</div>
</div>
the CSS for the span class:
.text-on-the-right
{
margin-left:10px/* or the desired the width */
}
Looks like it should be simple enough, but you need to bash your elements around with some forced margins... here goes:
<div class="col-sm-6 custom">
<i class="fa fa-camera-retro fa-3x pull-left"></i>
<div class="text">
<h6 class="custom-margin">Unlimited Support</h6>
We're here to help! Just ask away...
CSS:
.text{margin-left: 60px;overflow: hidden;}
.custom-margin{margin-top:4px;margin-bottom:4px}
EXAMPLE: http://www.bootply.com/qvjfInH7yQ
ps - your code shows an h6 for "Unlimited Support" but your example image looks like it's something else. I've used h6 as starting point, but if it's something else, you'll need some more bashing precise tweaking of margins to get it into the right exact placement.
The following approach would be an alternative to the Bootstrap Grid:
<div>
<img class=position-absolute src="ICONNAME.svg" alt="ICON-ALT" width="40" height="40">
<div class=pl-3>
text right
</div>
</div>
Manual Bootstrap Spacing
Related
I tried to apply the float: right to the button and the text but its just not working because it destroys everything.
Any ideas?
<hr>
<div class="table">
<div class="row">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren
<span class="right-cell"> 14 neue Meldungen</span>
</div>
</div>
<hr>
https://jsfiddle.net/uoyh2fk9/
Not sure what, "destroys everything" means, but it sounds like flexbox might work better for what you are trying to achieve. Remove the display: table's from your divs and try the following:
CSS
.row {
display: flex;
justify-content: flex-end;
}
JSFiddle
If you would like to know more about flexbox and how it works, here is a link.
Here's a possible solution: https://jsfiddle.net/UXEngineer/uoyh2fk9/9/
<div class="container-fluid">
<div class="col-lg-12">
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-lg-12 clearfix"></div>
<div class="col-lg-12 clearfix">
<hr class="horizontal-divider">
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
</div>
</div>
I've added a responsive solution using the Bootstrap CDN to the example in JSFiddle. If you want to use this jsfiddle make sure you also add the CDN external sources to the your solution.
You can change the column size to fit your solution.
I have an app that I'm building with Bootstrap 4. I need to center some icons underneath an image. I have a Bootply here. My code looks like this:
<div class="container">
<br>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-3">
<img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;">
<br>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-twitter"></i></li>
<li class="list-inline-item"><i class="fa fa-google-plus"></i></li>
<li class="list-inline-item"><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<div class="col-md-9">
<div><strong>Bill Gates</strong></div>
<p>
Here is some information about Bill Gates.
</p>
</div>
</div>
</div>
</div>
</div>
My question is, how do I horizontally center the three icons underneath my image so that it looks like a centered toolbar?
On your UL tag, remove the inline-list class, it's enforcing a float.
In the picture below you can see my right arrow has gone off the screen when the screen size is small. How can I fix this?
The arrows and carousel are aligned mostly using bootstrap's grid with a little bit of custom css. It is easiest just to see it in a JSFiddle, but here is the HTML:
<div class="container-fluid">
<div class="row vcenter-parent">
<div id="carouselParent" class="col-xs-12">
<div id="carousel">
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
</div>
</div>
<div class="col-xs-1 vcenter-child" style="float:left;">
<a class="slick-prev">
<i class="fa fa-arrow-left fa-4x"> </i>
</a>
</div>
<div class="col-xs-1 col-xs-offset-11 vcenter-child hright" style="float:right;">
<a class="slick-next">
<i class="fa fa-arrow-right fa-4x"> </i>
</a>
</div>
</div>
</div>
What I think is happening:
The arrows are not bound by the width of the div. For the left arrow this is ok because the arrow continues on to the right of the div, so really only the left padding is affecting the arrow's position.
However, on the right the arrow begins drawing after the left padding and continues right off the durping screen.
Update:
Yes my column math was wrong, it should have been an offset of 10 not 11. However, the arrow now needs to be pushed to the right side. Any ideas?
Updated JSFiddle
Your bootstrap column offset was messing up column layout. Just move each of the arrows into a single size 12 column and float them left and right respectively.
<div class="container-fluid">
<div class="row vcenter-parent">
<div id="carouselParent" class="col-xs-12">
<div id="carousel">
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
</div>
</div>
<div class="col-xs-12 vcenter-child" style="float:left;">
<a class="slick-prev pull-left">
<i class="fa fa-arrow-left fa-4x"> </i>
</a>
<a class="slick-next pull-right">
<i class="fa fa-arrow-right fa-4x"> </i>
</a>
</div>
</div>
<div class="row vcenter-parent" style="padding-top: 50px">
<div class="col-xs-10.col-xs-offset-1">
<div id="carouselText">
<div><p>meow</p></div>
<div><p>meow meow</p></div>
<div><p>meeeeow meow</p></div>
</div>
</div>
</div>
</div>
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:
<div class="row">
<div class="col-md-4 center-block">
<div>
<i class="glyphicon glyphicon-time center-text"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-star center-text"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-heart center-text"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?
You need to use text-center instead of center-block.
There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center">
<div>
<i class="glyphicon glyphicon-time"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-star"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-heart"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>