Center align five columns in a single row without offset - bootstrap - css

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">

Related

Override bootstrap side gaps on page for div

I'm using bootstrap 4.3.1, ASP.NET MVC (.NET 5) and all the pages have gaps at the side which is fine but I want one div to ignore that and be 80% of the width and centered, whilst the remaining parts of the page stay the same.
No matter what the div wont change unless I put "width: 1000px;" and there's still the left margin, even though I specify "left: 50px !important".
I've tried a combination of setting the div as "container-fluid" and adding that into a "row". I've also tried adding style tags "style="width:80% !important; left:50px !important;padding:0px;margin:0px;"
Solution Zip File: Google Drive
<div class="row" style="width:80% !important; left:50px !important;padding:0px;margin:0px;" >
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
</ul>
<div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active" id="rLocal">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 1
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rrEPRA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 2
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rSWA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 3
</div>
<div class="card-body">
<p>
None
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rGI">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 4
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div class="container">
<main role="main" class="pb-3">
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
</ul>
<div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="rLocal">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 1
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rrEPRA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 2
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rSWA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 3
</div>
<div class="card-body">
<p>
None
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rGI">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 4
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

You have a container-fluid inside of a container. Your parent container will take the appropriate width in the center of the screen, and then your container-fluid will take the 100% of that. So in the end you'll have a div with the same width of a container. All you need to do is remove the div enclosing the <main>, i.e., the <div class="container">.
It should look something like:
<main>
<div class="container-fluid">
// Navbar Code
</div>
</main>
This should span the navbar wide. However, you'll still have a 15px padding on both sides, you can remove it by adding a px-0 class on the container-fluid div.
Also, you have imported Jquery, Bootstrap-min and Bootstrap Bundle.
You do not the need the Bootstrap-min if you have the bundle. You should remove it to prevent any issues with JS related parts of Bootstrap.

Bootstraps nav-tabs cross

I am using Bootstrap 3 and I have the following code:
<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 col-lg-offset-4 col-md-offset-3 col-sm-offset-2">
<div >
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">Sign In</li>
<li role="presentation" class="">Register</li>
</ul>
</div>
<div class="tab-content">
<div id="login" class="tab-pane fade active in">
<login-form ></login-form>
</div>
<div id="register" class="tab-pane fade">
<register-form></register-form>
</div>
</div>
</div>
My UI looks like this. Why is the cross appearing at the end? How do I get rid of it?
Thanks,
Shilpa

Bootstrap nav-justified inside div.col-* not working as expected

I am facing a problem with bootstrap 3 and the nav-justified class. When I put the nav inside a div with class col-*, it does not work properly. When you try to minimize the screen, if the resolution is less than 1500px the <li> overflows the div. I was wondering why.
I would like to know if I am missing something. Here goes an exemple of code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading clickable">
XYZ
<span class="pull-right"><i class="fa fa-caret-up fa-lg"></i></span>
</div>
<div class="panel-body ">
<ul class="nav nav-pills nav-justified" role="tablist" id="myPill">
<li role="presentation" class="active">External I/O</li>
<li role="presentation">Version Information</li>
<li role="presentation">Config Information</li>
<li role="presentation">Channel A</li>
<li role="presentation">Statistics</li>
<li role="presentation">ADC</li>
<li role="presentation">Sampling Info</li>
<li role="presentation">Flags</li>
</ul>
<hr />
<div class="tab-content" id="advancedContent">
<div class="tab-pane active" id="externalio">
</div>
<div role="tabpanel" class="tab-pane" id="versionInformation">
</div>
<div role="tabpanel" class="tab-pane" id="configInformation">
</div>
<div role="tabpanel" class="tab-pane" id="channelA">
</div>
<div role="tabpanel" class="tab-pane" id="statistics">
</div>
<div role="tabpanel" class="tab-pane" id="adc">
</div>
<div role="tabpanel" class="tab-pane" id="samplingInfo">
</div>
<div role="tabpanel" class="tab-pane" id="flags">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you.

I have a easy solution. Use this code below:
#media screen and (max-width:1500px){
.panel .nav>li>a{
padding:5px 0;
}
}

Bootstrap ordering panels

I've a bootstrap website but when i want that the panels are close together like on my screenshot.
As you can see the blue panel is far away from the panel above.
I want that the panel is like the green one but... i don't get it.
Tried to use all the cols in one row but it does not work.
Here is my source code:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">CSS Frameworks</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Bootstrap</li>
<li>Foundation</li>
<li>Skeleton</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Hulp bij programmeren</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Stackoverflow</li>
<li>W3Schools</li>
<li>PHPTuts.nl</li>
<li>Codeschool</li>
<li>Lynda</li>
<li>Treehouse</li>
<li>CSS-Tricks</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Generators</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Border radius generator</li>
<li>CSS Animation generator</li>
<li>CSS Box shadow generator</li>
<li>CSS button generator</li>
<li>CSS filter generator</li>
<li>CSS text shadow generator</li>
<li>CSS shapes generator</li>
<li>Google maps generator</li>
<li>Hash generator</li>
<li>HTML5 responsive form generator</li>
<li>Meta tag generator</li>
<li>Pricing table generator</li>
<li>QR Code generator</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Webdesign</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Flat UI Colors</li>
<li>Color shades generator</li>
<li>Freeimages</li>
<li>Dribbble</li>
<li>Behance</li>
<li>Line25</li>
<li>CSS-Tricks</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Download bootstrap</li>
<li>Customize and download</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Bootstrap W3schools</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Download bootstrap</li>
<li>Customize and download</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Bootstrap W3schools</li>
</ul>
</div>
</div>
</div>
</div>

Just put the last panel block into the first .col-md-3.col-sm-4:
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">CSS Frameworks</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Bootstrap
</li>
<!-- ... -->
</ul>
</div>
</div>
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Download bootstrap
</li>
<!-- ... -->
</ul>
</div>
</div>
</div>
Demo: http://plnkr.co/edit/VIzi52ziUDbm9vHuIfsk?p=preview

Foundation CSS Framework-Responsive Grid

I have started using Foundation4 CSS framework for designing and developing A repsonsive page.
I am struggling with the footer(div),on Desktop it the div with class="small-12 coulms" settles at the bottom
but however when I am trying to reduce the browser screen size for mobile the bottom div is coming up in between other divs rather than occupying the footer position.
This is my code, Any assistance how I can restrict the footer
using the Foundation 4 CSS framework methods will help me a lot in using the framework.
<div id="header" class="row">
<div id="logo" class="large-3 columns">
<img src="img/logo-header.gif" />
</div>
<div id="slogan" class="large-3 columns">
<span class="slogan">AAAAAAAAAAAAAAAAAAA
<sup style="font-size: 13px;font-family: Arial;">*</sup>,
BBBBBBBBBBBBBBBBB
</span>
</div>
<div id="search" class="large-5 columns">
<div class="large-12 columns hide-for-small">
<ul class="topLinks">
<li>Contact us</li>
<li>Careers</li>
<li>Research & Tools</li>
<li class="noBorder">About </li>
</ul>
</div>
<div class="large-12 columns">
<div class="small-8 columns">
<input type="text" />
</div>
<div class="small-4 columns">
Search
</div>
</div>
</div>
</div>
</div>
<div class="small-12 large-12 columns">
<div class="row">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><h1> Home </h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active has-dropdown">Experience the difference
<ul class="dropdown">
<li >Why We</li>
<li>Getting Started</li>
</ul>
</li>
<li class="divider"></li>
<li class="divider"></li>
<li class="has-dropdown">How Can We Help You
<ul class="dropdown">
<li >Our Unique Aprroach</li>
<li>Our Offerings</li>
<li>Financial Products</li>
</ul>
</li>
<li class="divider"></li>
<li class="divider"></li>
<li>Have An Advisor Contact You</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li>My Account
</ul>
</section>
</nav>
</div>
</div>
<div class="small-12 large-12 columns">
<div id="mainSection" class="row" style="background:blue">
<div id="left" class="large-3 columns" style="background:#8DBC8F" >
<div id="leftFirst" class="large-12 columns" style="background:#F08080"><h3>News and Features </h3></div>
<div id="leftSecond" class="large-12 columns" style="background:#E6E6FA"><h3> About </h3></div>
</div>
<div id="right" class="large-9 columns" style="background:#008B8B">
<div id="rightContainer" class="row">
<div id="leftFirst" class="large-12 columns" style="background:#DAA520"> </div>
<div id="leftSecond" class="large-12 columns" style="background:#7B68EE">
<div id="welcome" class="row">
<div id="image" class="large-12 columns"><h3>Welcome TO </h3> </div>
<div id="about" class="large-12 columns">
<div id="welcome" class="row">
<div id="about1" class="large-4 columns"><h6>EEEEEEEEEEEEE</h6> </div>
<div id="about2" class="large-4 columns"> <h6>Our Unique Aprroach</h6> </div>
<div id="about3" class="large-4 columns"><h6>Our Offerings</h6> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="large-12 columns">
nithkincdbjcbdsj
</div>
</div>
</div>
</div>

I would have the footer as its own class="row", personally. I believe the class applies a clearfix so it stays on its own.

Not sure if you have this resolved. I noticed in your example code above, there are many nested columns that are not contained by an element with the class "row".
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-eight columns">
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-4 columns"></div>
</div>
</div>
</div>
It is my understanding that this is necessary for the columns to work correctly.
Someone correct me if I'm misunderstanding the docs.

Resources