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.
Related
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
I have a sticky top-bar, ie something like:
<div id="main-navigation" class="top-bar-container" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<strong>My Brand</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
And now I have a row that I want to stick to it, but it does not work properly (it sticks to the top of the page when I scroll):
<div class="filter-row row" data-sticky-container>
<div class="sticky column expanded" data-sticky data-top-anchor="main-navigation:bottom">
</div>
</div>
P.S.: the main-navigation sticks properly.
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
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
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>