CSS bootstrap alignment issue - pull right not working - css

I am using simple css alignment of button on right hand side using pull right at http://www.inboundio.com/services, it is working for first block but it is not for second block. I am not sure what is going wrong, any help ?
You can see the code at the above url, I am also pasting it here too as per SO guidelines
<div class="span12 well">
<ul class="nav nav-list">
<li>
<h3 style="color:#495B67">Heading</h3>
</li>
<li><br>
<p>Sample Text</p><br>
</li>
</ul>
<div class="span8 pull-left">
<strong><b>Your personal consultation will include:</b></strong>
<p style="font-size: 17.5px">
</p><ol>
<li>How your current marketing strategy compares with your competitors</li>
</ol>
<p></p>
</div>
<div class="span4 pull-right">
<button class="btn btn-warning" type="button"><b>Contact Us</b></button>
</div>

because for first block you have set the css value :
.row-fluid [class*="span"]:first-child{margin-left: 0px;}
that only work for first child
do it like .row-fluid .well [class*="span"]{margin-left: 0px;}

There are some structure issues.
Replace the HTML part with the below code.
Explanations:
In previous box you have only two spans, but on second box, you have three spans without a wrap. So I added a wrap div with row-fluid class.
<div class="span12 well">
<div class="row-fluid">
<ul class="nav nav-list">
<li>
<h3 style="color:#495B67">Inbound Marketing Consulting and Analysis</h3>
</li>
<li>
<br>
<p>Request a personalized marketing assessment and receive a
one-on-one consultation that will provide you with quick tips and
valuable insights that will transform your current marketing strategy.
</p>
<br>
</li>
</ul>
</div>
<div class="row-fluid">
<div class="span8 pull-left">
<strong><b>Your personal consultation will include:</b></strong>
<p style="font-size: 17.5px">
</p>
<ol>
<li>How your current marketing strategy compares with your competitors</li>
<li>Full website analysis and opportunities to improve</li>
<li>SEO tips you can immediately implement into your website</li>
<li>How to generate more leads via your website</li>
<li>Blogging, email marketing, and social media strategy</li>
</ol>
<p></p>
</div>
<div class="span4 pull-right">
<button class="btn btn-warning" type="button"><b>Contact Us</b></button>
</div>
</div>
</div>

Related

Meteor handsontables render in collapsible issue.

Hi there i am trying to put handsomtable in materialize collapsible divs but they render all completely wrong like so
As you can see the tables are over lapped. But when i click into the tables they fix them self's like so .
Here is where i load the tables
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="global"><i class="material-icons">filter_drama</i>Global What Ifs</div>
<div class="collapsible-body">
{{>GlobalWhatIf}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Vat Details</div>
<div class="collapsible-body">
{{>Vat}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Bank</div>
<div class="collapsible-body">
{{>Bank}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Dividends</div>
<div class="collapsible-body">
{{>Dividends tName="Dividends"}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Corporation Tax</div>
<div class="collapsible-body">
{{>Dividends tName="CorpTax"}}
</div>
</li>
</ul>
I was thinking of loading the table templates within each drop down div and rendering them when the header is active but i can get seem to get that working either any idea why this happens thanks

Bootstrap - inline-list stacks instead of lining-up horizontally

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>

Centering Icons in Bootstrap 4

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.

Bootstrap span's erroneously centered

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>

CSS list within div positioning issue

I'm updating the page for my company site. The footer here: applebees.com works correctly, but I ported the code to my WHMCS template and it's positioning the sitemap incorrectly. Any ideas what's going on? http://applebees.com/clients
<footer class="row1">
<div class="container1">
<div class="row1">
<div class="span2">
<h3>Sitemap</h3>
<ul>
<li>Home</li>
<li>Pricing</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Reseller</li>
<li>Dedicated</li>
<li>Support</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Terms Of Service</li>
<li>Privacy Policy</li>
<!--<li>#</li>-->
</ul>
</div>
<div class="span4">
<h3>Contact</h3>
<address>
<strong>applebees, LLC</strong><br>
San Francisco, CA<br>
Los Angeles, CA<br>
sales#applebees.com<br>
</address>
</div>
</div> <!-- /row -->
</div> <!-- /container -->
</footer>
CSS file for above page here: site/clients/templates/default/css/whmcs.css
The index.html page CSS (can't post hyperlinks): site/assets/css/style.min.css
I'm confused because I ported the code correctly, I think the divs are messing it up somehow?
In your case, the "noise" class gives some height of your div in armorshark.com. When you ported the region, you did not get the "noise" classed div. You can solve the with add the height: attribute on row1 class.

Resources