I'm trying to get the pricing table on this page centered: http://CloseDeals.co/sponsored
I'm using bootstrap so maybe there's a way to move the columns in?
It's currently justified to the left, but I want it centered.
Here's the code:
<section id="pricing" class="pricing">
<div class="container">
<div class="row m-b-lg">
<div class="col-lg-12 text-center">
<div class="navy-line"></div>
<h1><span class="navy"><strong>Get 50% Off Through This Sponsored Link!</strong></span></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 wow zoomIn">
<ul class="pricing-plan list-unstyled">
<li class="pricing-title">
Monthly
</li>
<li class="pricing-desc">
21-day FREE Trial
</li>
<li class="pricing-price">
<s>$40</s> <span>$20</span>
</li>
<li>
Unlimited Sequences
</li>
<li>
Unlimited Active Contacts
</li>
<li>
Un-Sponsored Emails
</li>
<li>
Email & Chat Support
</li>
<li>
Import Contacts
</li>
<li>
API & Zapier Access
</li>
</ul>
</div>
<div class="col-lg-4 wow zoomIn">
<ul class="pricing-plan list-unstyled selected">
<li class="pricing-title">
Annual
</li>
<li class="pricing-desc">
21-day FREE Trial
</li>
<li class="pricing-price">
<s>$400</s> <span>$200</span>
</li>
<li>
Unlimited Sequences
</li>
<li>
Unlimited Active Contacts
</li>
<li>
Un-Sponsored Emails
</li>
<li>
Email & Chat Support
</li>
<li>
Import Contacts
</li>
<li>
API & Zapier Access
</li>
<li>
<strong>2 Months FREE!</strong>
</li>
</ul>
</div>
</div>
<div class="row m-t-lg">
<div class="col-lg-8 col-lg-offset-2 text-center m-t-lg">
<a class="btn btn-primary btn-xs" href="http://app.closedeals.co/users/sign_up/fbs">Start Your 21-Day FREE Trial</a>
</div>
</div>
</div>
</div>
</section>
I tried adding:
<div class="container" align="center">
the page have bootstrap so you can use an offset class, i tried in the inspector an offset of 2 and seem nice
<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated" style="visibility: visible; animation-name: zoomIn;">
you can try another values if you wish:
col-lg-offset-2
here is more info:
bootstrap grid offseting
you can do it with flexbox you put this code to the parent of the two boxes
YOUR CONTAINER{
display: flex;
justify-content: center;
}
Do you want to offset the first pricing table?
You could add an offset to the first item.
<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated">
Related
i have boostrap3 carosal. i have horizantal menu over the carosal . how can i make it vertical right side of the slider without right margin.
<section>
<div class="container">
<div class="row">
<div class="wed-hom-ser">
<ul>
<li>
Contact Us
</li>
<li>
Share
</li>
<li>
Call Us
</li>
<li>
<img src="images/icon/h-ic3.png" alt=""> Whats App
</li>
</ul>
</div>
</div>
</div>
</section>
I'm trying to organize the way Sonata Admin shows sonata_type_collection.
It looks like this now:
In the source html code I see that all of that is meant to be tabs
<div class="sonata-ba-tabs">
<div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#s5860de8a43681_1_1" data-toggle="tab">
<i class="icon-exclamation-sign has-errors hide"></i> -
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="s5860de8a43681_1_1">
<fieldset>
<!--some field here-->
</fieldset>
</div>
</div>
</div>
</div>
<div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#s5860de8a43681_2_1" data-toggle="tab">
<i class="icon-exclamation-sign has-errors hide"></i> -
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="s5860de8a43681_2_1">
<fieldset>
<!--some field here-->
</fieldset>
</div>
</div>
</div>
</div>
</div>
(I omitted some code to make it shorter)
We can definitely see that it is meant to be some kind of jquery tabs, but I can't really find any information how to make that work like a tabs. Is there anyway to configure the form to implement that?
I am trying to get top-bar nav menu that contains an 280 x 70 image on the left bottom align the menu choices on the right. I can right and left align text in Foundation but I can't find a way to vertical align.
Example Fiddle
<div class="row full-width">
<div class="large-4 columns">
<img src="MyLogo.png" width="280" height="70" alt="My 280 x 70 Logo" />
</div>
<div class="large-8 columns">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
</div>
</li>
<li class="toggle-topbar menu-icon"> <span></span>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"> <a href="/home/index" class="menuMix">
<span class="menuMinor">Home Page</span>
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class=""> <a href="/home/about" class="menuMix">
<span class="menuMinor">Who We Are</span>
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class=""> <a href="/home/contact" class="menuMix">
<span class="menuMinor">Get In Touch</span>
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
</div>
The easiest way is to use flexbox.
.top-bar {
display: flex;
justify-content: flex-end;
align-items: center;
}
I am using Bootstrap v3 for a layout and have added a dropdown to the navbar but when I add btn-primary the text is black so cannot be seen, if I remove the btn-primary then the corner radius seems to overlap the menu.
Any help is appreciated.
<div class="container">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="Javascript:void(0);">Title Information </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown btn-primary">
<a class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li class="divider"></li>
<li>
Close
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div role="tabpanel" class="col-md-12 column">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
some images:
https://www.dropbox.com/s/fuirgtcfc0obl04/Image1.JPG?dl=0
https://www.dropbox.com/s/en0vooc1z99hbkh/Image2.JPG?dl=0
Take out the "btn-primary" but change it to "btn" only, that should fix it.
Remove both btn-primary classes, as these aren't required.
You also have </div> and </nav> closing in the wrong order, and two extra </div> at the bottom of your code.
With the btn-primary removed, and the above fixed, then you get the following:
https://jsfiddle.net/9jym0k8r/
You can customize the style of bootstrap button.
I just added this to change the color of text :
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
Link Demo : http://www.bootply.com/Ukp9KCUuFP
You can also give an "unique id" then customize the style for this button.
<a id="test" class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
css:
#test {
color:white;
}
#test:hover{
color:black;
}
Link : http://www.bootply.com/XWF4x6uhmz
I'm using the Foundation 5-Framework. I want to create a navigation with a panel under it. When im adding the panel, the navigationbar is always on top the panel.
This is my Code:
<div id="content">
<div class="row">
<div class="contain-to grid fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>MySite</h1>
</li>
<li class="toggle-topbar menu-icon">
<span></span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">
Index
</li>
<li>
Contact
</li>
<li>
About me
</li>
<li class="has-dropdown">
Sign up
<ul class="dropdown">
<li>
Log in
</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="small-12 columns panel">
<p>This is a panel.</p>
</div>
</div>
</div>
</div>
You can either remove the class "fixed" from your third row (if you don't need a fixed positioned top bar),
or add margin-top to the second (panel) row (with the same height as the top-bar) if you wish to keep the top-bar fixed.
When an element is position fixed (like absolute and float) it is not actually on the page in the sense that static elements are not relative to it. so your panel was anchoring to the top of the page, because there was no block above it.
I am simplifying it a bit, but I hope that helps.