I'm trying to render a list of items with Bootstrap. Each item will show an icon, some left-aligned content and some right-aligned content. It will look something like this:
+----------------------------------------------------------+
| Peyton Manning Denver |
| [vertically QB Broncos |
| centered icon] #18 |
| Tenesee |
+----------------------------------------------------------+
| Andrew Luck Indianapolis |
| [vertically QB Colts |
| centered icon] #7 |
| Stanford |
+----------------------------------------------------------+
In an attempt to do this, I was using a ul list-inline. The reason why is because the icon will be smaller. It won't take up a full bootstrap column. However, if I use the list-inline, I don't know how to make the other columns take up the remaining space. I was trying this:
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<ul class="list-inline">
<li>
<i class="glyphicon glyphicon-tree-conifer" style="font-size:2.2rem; top:-10px;"></i>
</li>
<li>
<h4 style="margin-top:4px;">Peyton Manning</h4>
<div class="row">
<div class="col-xs-8">
<h5>QB</h5>
<h5>#18</h5>
<h5>Tennessee</h5>
</div>
<div class="col-xs-4 pull-right">
<h5>Denver</h5>
<h5>Broncos</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<ul class="list-inline">
<li>
<i class="glyphicon glyphicon-tree-conifer" style="font-size:2.2rem; top:-10px;"></i>
</li>
<li>
<h4 style="margin-top:4px;">Andrew Luck</h4>
<div class="row">
<div class="col-xs-8">
<h5>QB</h5>
<h5>#7</h5>
<h5>Stanford</h5>
</div>
<div class="col-xs-4 pull-right">
<h5>Indianapolis</h5>
<h5>Colts</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
I'm not sure how to include the icon and then grab the rest of the space such that I can left-align and right-align content in that space. Can someone please steer me in the right direction?
Thank!
In Bootstrap 3 there are the pull-left and pull-right classes that float left and right respectively.
You can use those and the grid system of Bootstrap and with less markup achieve the desired result.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 text-center">
<i class="glyphicon glyphicon-tree-conifer product-icon"></i>
</div>
<div class="col-xs-5">
<div class="pull-left">
<h5>QB</h5>
<h5>#18</h5>
<h5>Tennessee</h5>
</div>
</div>
<div class="col-xs-6">
<div class="pull-right">
<h5>Denver</h5>
<h5>Broncos</h5>
</div>
</div>
</div>
</div>
CSS:
.product-icon { font-size:2.2rem; margin-top:20px;}
Here is a jsfiddle with a demo. I used only the col-xs-* but only to keep it simple.
Edit: To center the icon you can use the text-center class, also provided by Bootstrap. To vertically align the icon with CSS is not easily achievable since your main concern is that the div.row does not have a fixed height. So I gave it a small margin-top instead.
Related
I just discovered the "push" and "pull" classes in Bootstrap, but am having a lot of trouble implementing them the way I'd like. On XS screens, my content appears as follows, which is correct:
|A||B||C|
But on SM screens, I need it to be:
|B|
|C|
|A|
My HTML is below. I tried adding "col-sm-push-10" to the div that contains my button, but that just pushed it to the right within it's own div. I need to actually MOVE this div down. Any help would be much appreciated!!
<div class="container-fluid">
<div class="col-sm-4">
<ul class="prod-group">
<div class="col-xs-2 col-sm-10">
<li><button type="button" class="btn">A</button></li>
</div>
<div class="col-xs-6 col-sm-10">
<li>B</li>
</div>
<div class="col-xs-4 col-sm-10">
<li>Cr</li>
</div>
</ul>
</div>
Usually you'd want elements to stack vertically on xs screens, and remain horizontally on larger (sm) screens, so this is an unusual case where you actually want the opposite. Create the stacking sm layout first, then adjust for xs using push-pull.. A-B-C on large. B-C-A on mobile.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<ul class="row prod-group">
<li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0">
B
</li>
<li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0">
C
</li>
<li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0">
A
</li>
</ul>
</div>
</div>
</div>
Demo http://www.codeply.com/go/yMxh8sGwMZ
Also, don't forget to keep your columns inside a row for proper padding.
You should write your elements in order that you want to see on -sm-.
Then adjust their position at -xs-:
<div class="row">
<div class="col-sm-12 col-xs-4 col-xs-push-4">
B
</div>
<div class="col-sm-12 col-xs-4 col-xs-push-4">
C
</div>
<div class="col-sm-12 col-xs-4 col-xs-pull-8">
A
</div>
</div>
By the way, you should use li only as direct child of ul as well as not using other elements such as div directly inside ul, because it is not valid.
There are so many questions on this, but they all seem to just want one item on the left and one on the right, or a button group. All of those are straightforward.
How can I achieve similar to this bootply
but instead of two buttons in the group on the right, two other elements - two divs, or two h3 for example?
Whatever I try these 2 elements always end up vertically stacked and not horizontally aligned in the right side of the footer.
EDIT
#Harinder88 provided this solution which, as you can see, does do what I asked and so I have accepted as the answer as I think in the vast majority of use cases, this is what most people are trying to achieve.
However, you can see that if the text is too long for the column, it gets wrapped and now everything is not on a single line. But I accept that is the compromise of having a responsive design. It just so happens that in my actual use case, that last item cannot be allowed to wrap, so I just have to give it a fixed width to solve that. Thanks #Harinder88.
Now see this example i aligned 2 items horizontal in left and right with 2 methods u can use any 1 of them
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<div class="row">
<div class="col-md-6 col-xs-6">
<p>Left side with col</p>
</div>
<div class="col-md-6 col-xs-6">
<p> Right side with col</p>
</div>
</div>
</div>
<div class="pull-left">
<div class="pull-left">Left side with pull</div>
<div class="pull-right">Right side with pull</div>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
<hr>
you can use pull-right for align div right and pull-left for align div on left side .
if you want to do further partition you can use use same things again.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</div>
<div class="pull-left">
<h4>
Fotter (you can use anything here button code or link tag , you can remove hr tag and use anything you want )
</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
I managed to figure this out by replacing the button groups and the buttons with spans, then it works fine. Everything aligned on one line, 1 item pulled left and 2 pulled right.
<div class="panel-footer">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<span class="pull-right">
<span>Recording - Last updated at x</span>
<span class="trail-status">PUBLISHED</span>
</span>
<h5>x comments
</h5>
</li>
</ul>
</div>
<div class="clearfix">
</div>
</div>
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.
I'm trying to align a site-name + 2 images as my site header. Using Bootstrap grid layout, I can easily achieve this with a nice looking in medium/large size devices.
| site-name | | image1 | | image2 |
However, with small size devices, my 3 columns breaks into 3 rows and the layout is not what I want:
| site-name |
| image1 |
| image2 |
As I'm using just 3 small columns, I would like to fit them in the same row since they are using just a few pixels. The result for small screens would be something like:
| site-name | | image1 | | image2 |
I have created a Bootply demo. The code below is the best that I could do so far. I've already tried using things like .pull-right to avoid adding the empty 8-cols, but the result was the same.
Current code:
<div class="row">
<div class="col-sm-2">
<h2>text1</h2>
</div>
<div class="col-sm-8">
<!-- empty -->
</div>
<div class="col-sm-1">
<img src="http://placehold.it/60x60">
</div>
<div class="col-sm-1">
<img src="http://placehold.it/60x60">
</div>
</div>
It sounds like what you consider "small" devices is what Bootstrap would consider "extra small".
This should give you the desired effect:
<div class="row">
<div class="col-xs-4 col-sm-2">
<h2>text1</h2>
</div>
<div class="hidden-xs col-sm-8">
<!-- empty -->
</div>
<div class="col-xs-4 col-sm-1">
<img src="http://placehold.it/60x60">
</div>
<div class="col-xs-4 col-sm-1">
<img src="http://placehold.it/60x60">
</div>
</div>
You might need to step all the classes up to the next size to get what you want (e.g. "col-sm-4 col-md-1")
It's because you've used col-sm, and not col-xs (which is more for small screens like mobile).
Try this:
<div class="row">
<div class="col-xs-2">
<h2>text1</h2>
</div>
<div class="col-xs-8">
<!-- empty -->
</div>
<div class="col-xs-1">
<img src="http://placehold.it/60x60">
</div>
<div class="col-xs-1">
<img src="http://placehold.it/60x60">
</div>
</div>
Or this:
<div class="row">
<div class="col-xs-10">
<h2>text1</h2>
</div>
<div class="col-xs-1">
<img src="http://placehold.it/60x60">
</div>
<div class="col-xs-1">
<img src="http://placehold.it/60x60">
</div>
</div>
You can read a good explanation here:
Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap
I'm using Foundation 4 and I have a block grid that looks the way I want it to in portrait on my iPhone 5 (ios7), but when i turn it to landscape, it's a mess. For some reason it doesn't center anything that I have centered in portrait.
<div class="row"><!-- for centering -->
<div class="small-12 large-8 small-centered columns">
<div class="row">
<div class="small-12 large-8 small-centered columns" style="text-align:center;">
<h3 id="makemebold"><small>some long text about why my site is great<small></h3>
</div>
</div>
<div class="row">
<div class="small-12 large-8 small-centered columns">
<a href="shopping_list" class="greencallout">
Hey, User, Get Started! Woohoo!</a></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="small-12 large-6 small-centered columns">
<ul id="board" class="small-block-grid-2 large-block-grid-8" >
<li><a id="login_a" class="mobile_buttons" href="#"
title="Click here to Login">Login|Register</a></li>
<li><a id='makemebold' class="mobile_buttons" href="learn">Learn More</a></li>
<li><a href="profile" class="mobile_buttons" >Profile</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div><!-- end of centering div -->
The "long text about why my site is great" IS centered. But when flipped to landscape, it doesn't get any bigger and doesn't seem to change to the large-8 setting.
Thanks for your help!
Nevermind. I just added style="text-align:center;" to each of the div tags that wasn't centering and it fixed the problem.