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
Related
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.
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;
}
}
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 trying to vertically and Horizontally center the list-group to the left of the image in the below code.
<div class="jumbotron">
<div class="row">
<div class="col-lg-6">
<ul class="list-group center-list">
<li class="list-group-item">something here</li>
<li class="list-group-item">something here</li>
<li class="list-group-item">something here</li>
</ul>
</div>
<div class="col-lg-6">
<img src="images/ModelBack.png" class="pull-right">
</div>
</div>
I created the center-list class and have tried following a number of examples with similar questions, but my CSS is apparently lacking.
This worked for me:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Big Test</h1>
<h2>Little Test</h2>
</div>
<div class="col-md-6">
<img src="img.jpg" />
</div>
</div>
</div>
</div>
you are missing a closing tag on jumbtron maybe that is the problem,
<div class="jumbotron">
<div class="row">
<div class="col-lg-6">
<ul class="list-group center-list">
<li class="list-group-item">something here</li>
<li class="list-group-item">something here</li>
<li class="list-group-item">something here</li>
</ul>
</div>
<div class="col-lg-6">
<img src=""></img>
</div>
</div>
</div>
try now ;)
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.