Issue screenshots:
I'm seeing this issue in a few of my divs. Everything looks fine on desktop until I test it out on an iPad. The div does not seem to wrap my content despite my attempt to use < span class="clearfix" ></span> before closing the div.
This is how the code looks like
<div class="span8">
<div class="box datepickerbox">
<span class="daterange_title span3">Activity summary for </span>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="icon-calendar icon-large"></i> <b class="caret" style="margin-top: 8px"></b>
</div>
<span class="clearfix"></span>
</div>
</div>
All you need to change is
<span class="clearfix"></span>
to
<div class="clearfix"></div>
and Bootstrap clearfix rules do not specify the elemnt to be displayed as a block element and that's what you are missing.
Related
Why is the content nesting itself inside of each list item? The content should all be on the same line. I've tried floating and changing the position, but nothing is working. How do I fix this?
.icon-left{
float:left;
padding: 12px 25px 60px 15px;
color:#4ECABE;
}
.text{
text-align:left;
padding:0 0 0 15px;
}
.text h4{
padding-bottom:5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="icon-left">
<i class="fa fa-ticket fa-3x"></i>
</div>
<div class="text">
<h4>Get Free Books</h4>
<p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
</div> <br>
<div class="icon-left" id='smile'>
<i class="fa fa-smile-o fa-3x"></i>
</div>
<div class="text2">
<h4>New Books Every 6 Hours</h4>
<p>That's right, you only have 6 hours to get entries for a book.</p>
</div> <br>
<div class="icon-left">
<i class="fa fa-truck fa-3x"></i>
</div>
<div class="text">
<h4>Absolutely free!</h4>
<p>We even pay shipping.</p>
</div>
</div>
You need to clear the floats. You can either apply br { clear: both; } with your existing markup, or a better way to do it with bootstrap is to wrap the .icon-left and .text elements in an element with the .clearfix class.
.icon-left{
float:left;
padding: 12px 25px 60px 15px;
color:#4ECABE;
}
.text{
text-align:left;
padding:0 0 0 15px;
}
.text h4{
padding-bottom:5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="clearfix">
<div class="icon-left">
<i class="fa fa-ticket fa-3x"></i>
</div>
<div class="text">
<h4>Get Free Books</h4>
<p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
</div>
</div>
<div class="clearfix">
<div class="icon-left" id='smile'>
<i class="fa fa-smile-o fa-3x"></i>
</div>
<div class="text2">
<h4>New Books Every 6 Hours</h4>
<p>That's right, you only have 6 hours to get entries for a book.</p>
</div>
</div>
<div class="clearfix">
<div class="icon-left">
<i class="fa fa-truck fa-3x"></i>
</div>
<div class="text">
<h4>Absolutely free!</h4>
<p>We even pay shipping.</p>
</div>
</div>
</div>
Give your .icon-left divs a coloured background (e.g. background: gold) and it should become evident. The bottom padding extends past the non-float elements on the right, which is pushing the next row along.
Reducing the padding on .icon-left (for example to padding: 12px 25px 24px 15px;) should allow everything to snap back into line.
Slightly unrelated tip: add the class fa-fw to your FA icons to use fixed width icons, which will allow your text to line up perfectly.
you have extra padding icon-left
try padding: 12px 25px 25px 15px;
Also I would wrap every section with a div and a grid class col-lg-3 so you dont have to use this big padding, and will give you a better control on your UI.
I'm trying to add a sub-footer on top of my footer, like so
header+footer(blue)
sub-footer(red)
I used Ryan's sticky-footer method, so my HTML looks like this
<div id="root">
<div id="header">
<div class="wrapper">
<h1 class='logo'>Logo</h1>
</div>
</div>
<div id="content"></div>
<div id="root-footer"></div>
</div>
<div id="footer">
<div class="wrapper">
<div id='subfooter'>
<div class='subfooter-content'>
<a id="main-nav01" href="javascript: void(0)" target="_self">トップ</a>
<a id="main-nav02" href="javascript: void(0)" target="_self">「世界のKitchenから」の思い</a>
<a id="main-nav03" href="javascript: void(0)" target="_self">タイのお母さんのKitchenから</a>
<a id="main-nav04" href="javascript: void(0)" target="_self">ちいさなKitchenのムービー</a>
</div>
</div>
</div>
</div>
and my CSS for the subfooter like this
#subfooter
position: relative
.subfooter-content
position: absolute
margin-top: -200px
height: 70px
z-index: 10
but it doesn't work on FF, if you see the screen-shots (FF is on the right), the subfooter(red) follows the footer(blue)
edit
I used compass and in the actual design it uses outline top, which i'm having problem with in FF.
here's the jsbin http://jsbin.com/fifeleru/1
If you replace outline:1px solid blue by border-top:1px solid blue; on the .footer the problem is solved.
See here
I am working with Bootstrap 3.0 and would like to accomplish something along these lines
Favorites Add
Where favorites is pulled left and wrapped in an H3 and the add is pulled right and wrapped in an anchor. They are bottom aligned and on the same line.
Here is what I have that is not working:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="border: 1px solid red"><h3>Favorites</h3></div>
<div clas="col-md-6" style="text-align: right; border: 1px solid red"><a>add</a></di>
</div>
<hr />
</div>
Many thanks in advance.
You could use a pull-right link inside the H3..
<div class="col-md-6"><h3>Favorites add</h3></div>
Demo: http://bootply.com/87773
This should get you most of the way there:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="float:left; width:50%;"><h3>Favorites</h3></div>
<div clas="col-md-6" style="float:right; width:50%; text-align: right"><a>add</a></div>
</div>
<hr/>
</div>
I have a couple rows of buttons, and I'd like one to be left aligned and the other right aligned -- but on a separate row.
If I were using tables this is how I'd do it:
<table>
<tr>
<td>Content Left Aligned</td>
</tr>
<tr>
<td align="right">Content Right Aligned</td>
</tr>
</table>
But I'm trying to use CSS and divs here. This is what I have: ( JSFiddle )
<div style='text-align:left;'>
<div class="btn1 rounded-corners">
Green
</div>
<div class="btn1 rounded-corners">
Blue
</div>
<div class="btn1 rounded-corners">
Purple
</div>
</div>
<div style="clear:all;"> </div>
<div style='text-align:right;'>
<div class="btn2 rounded-corners">
Six
</div>
<div class="btn2 rounded-corners">
Seven
</div>
<div class="btn2 rounded-corners">
Eight
</div>
</div>
<div style="clear:all;"> </div>
What am I doing wrong with this CSS? (see the JSFiddle for a working example of what's going on - there are some styles there that I didn't want to clutter up here)
Replace float:left with display:inline-block
Updated Fiddle
float is used for a very specific purpose. Placing <div>s on the same line is not it ;)
I agree with Pablo and would use CSS stylesheets rather than JS Fiddle
All you have to do is REMOVE the FLOAT properrty from your STYLES
And in place of DIVs use SPANs
No Other changes required!!
Copy and paste the code below into a NEW document and see.
.btn1
{
font-size:1.2em;
padding:5px 20px;
margin:0px 5px;
border: 1px solid #0E5727;
color:red;
cursor:pointer;
}
.btn2
{
font-size:.8em;
padding:5px 20px;
margin:0px 5px;
border: 1px solid #0E5727;
color:blue;
cursor:pointer;
}
.rounded-corners
{
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari, Chrome */
border-radius: 20px; /* universal */
}
<div style="text-align:left;">
<span class="btn1 rounded-corners">Green</span>
<span class="btn1 rounded-corners">Blue</span>
<span class="btn1 rounded-corners">Purple</span>
</div>
<div style="width: 100%;"> </div>
<div style="text-align:right;">
<span class="btn2 rounded-corners">Six</span>
<span class="btn2 rounded-corners">Seven</span>
<span class="btn2 rounded-corners">Eight</span>
</div>
<div style="width: 100%;"> </div>
You should use float property.
Would be something like this:
<div style="float:left;width:400px">
</div>
<div style="margin-left:400px">
</div>
Anyway you should use a css file appart.
Try it and tellme if it worked out.
Problem
I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.
What I Have
I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.
<p>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
String to display after buttons on same line
</p>
What I have tried
I have tried a few things here. I modified the <p> tag to be a <div class="row"> with two span divs one for the buttons and one for the text but this did not work. I also tried the following:
<div>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
<span class="inline">String to display after buttons on same line</span>
</div>
and defined in the css .inline {display:inline-block; zoom:1; *display: inline;} However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.
Question
What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?
Update
Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:
I assume that this is because of floating. Is this correct and how would I fix it?
Put pull-left on the buttons div: http://jsfiddle.net/dbTqC/653/
I think this just sets float: left, so you'll need to clear things below it. There's a clearfix class for this.
It's worth having a look at some CSS resources so that you understand what's happening here.
<p class="btn-toolbar">
<span class="btn-group">
Button 1
</span>
<span class="btn-group">
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</span>
<span class="btn-group">Text here.</span>
</p>
This works:
<p>Hello <span class="btn-group">...</span></p>
I did as suggested in this SO answer, so basically I started off of .navbar .brand style and adapted a little bit.
If interested, here is my changed style:
/* See .navbar .brand style in bootstrap.css for a reference */
.btn-toolbar .title {
display: block;
float: left;
margin-top: -4px; /* Recover part of margin set in child Header nodes */
margin-left: 10px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
HTML usage:
<div class="btn-toolbar">
<div class="btn-group pull-left">
<a class="btn" href="#/search">Search...</a>
</div>
<div class="title">
<h4>View offers</h4>
</div>
<div class="btn-group pull-right">
<a class="btn" href="#/batchDelete">Delete ...</a>
<a class="btn" href="#/new">New</a>
</div>
</div>
and end result: