How to align the mobile btn to the right? Im using justify-content-between in the row div but its not working.
header {
background-color: orange;
}
<header>
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col">
<h1 class=" Header__logo">Logo</h1></div>
<div class="col">
<div class="Header__mobile">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul class="Header__mobile_list d-none">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</div>
</header>
Your flex property is only visibly affecting direct children of your row. Try putting your button as a direct child of the row.
Related
I am using the Bootstrap Grid System in order to make this list (3 columns) responsive. I am also using this with react.
The goal is that on large screens, I can fit all 3 columns in one row. On medium screens I fit two columns in one row and the last one in the last row. On very small screens I fit each column in one row.
It is working, however it is not pushing the columns on each row, its rather overflowing.
What am I missing?
<div className="container-fluid">
<div className="row">
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="col-tab">
<h4>Heading 1</h4>
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
</div>
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="col-tab">
<h4>Heading 2</h4>
<ul>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
</div>
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="col-tab">
<h4>Heading 3</h4>
<ul>
<li>Test4</li>
<li>TEst 5</li>
</ul>
</div>
</div>
</div>
</div>
I'm trying Bootstrap on a small project, But there is something I don't understand or I should do wrong. Here is my snippet:
nav{
background-color: lightblue;
}
section{
background-color: lightgreen;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
An horizontal scroll bar appears, how can I properly fix it, without adding external css rule, using only Bootstrap ones?
You need a use .container for a responsive fixed width Container. Add this class to your div
<div id="mainContainer" class="row container">
Use .container for a responsive fixed width container.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I believe you forgot your container.
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
You are missing the container class within your HTML markup, it needs to be:
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
Here is your code with the container class added:
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
Remove the class 'row' form :
<div id="mainContainer" class="row">
Add a wrapper around the .row with the .overflow-hidden class:
<div class="container overflow-hidden">
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">
I have five col-md-2 div inside a row div.
To center align i have used col-md-offset-1 with the first col-md-2 div.
I made the column divs Sortable(jqueryui)
http://jqueryui.com/sortable/#display-grid
So now when i move the first col-md-2 div, the offset moves with it.
http://jsfiddle.net/1uuuru2m/4/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="row content-boxes" id="sortable">
<div class="col-md-2 col-md-offset-1 ui-state-default">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">A</h3>
</div>
<div class="list-group">
<li class="list-group-item">first child of a</li>
<li class="list-group-item">second child of a</li>
<li class="list-group-item">third child of a</li>
</div>
</div>
</div>
<div class="col-md-2 ui-state-default">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">B</h3>
</div>
<div class="list-group">
<li class="list-group-item">first child of b</li>
<li class="list-group-item">second child of b</li>
<li class="list-group-item">third child of b</li>
</div>
</div>
</div>
<div class="col-md-2 ui-state-default">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">C</h3>
</div>
<div class="list-group">
<li class="list-group-item">first child of c</li>
<li class="list-group-item">second child of c</li>
<li class="list-group-item">third child of c</li>
</div>
</div>
</div>
<div class="col-md-2 ui-state-default">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">D</h3>
</div>
<div class="list-group">
<li class="list-group-item">first child of d</li>
<li class="list-group-item">second child of d</li>
<li class="list-group-item">third child of d</li>
</div>
</div>
</div>
<div class="col-md-2 ui-state-default">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">E</h3>
</div>
<div class="list-group">
<li class="list-group-item">first child of e</li>
<li class="list-group-item">second child of e</li>
<li class="list-group-item">third child of e</li>
</div>
</div>
</div>
</div>
</body>
</html>
How can I maintain the center-alignment inside the row div without using offset on first col div?
Use an empty col-md-1 instead of offset so that it doesn't move around. JSFiddle.
<div class="row content-boxes" id="sortable">
<div class="col-md-2 col-md-offset-1 ui-state-default">
goes to
<div class="row content-boxes" id="sortable">
<div class="col-md-1"></div>
<div class="col-md-2 ui-state-default">
I'm wondering if I can make the content in my tab panel scrollable. I have tried a couple things but I don't get it sorted.
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
<span class="pull-right">
<ul class="nav panel-tabs">
<li class="active">Tab 1</li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="test">
CONTENT
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/f3p35v76/
Are you looking for the content to scroll within the pane?
Fiddle: http://jsfiddle.net/uxsr66hp/1/
.tab-pane{
height:300px;
overflow-y:scroll;
width:100%;
}