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.
Related
I am using the following to show a list horizontally or vertically depending on the screen size.
<div class="row">
<div class="col-md-3">
<div class="d-md-none">
<div class="card">
<div class="card-body p-0">
<ul class="list-group list-group-horizontal">
<li class="list-group-item border-0">
<a href="javascript: void(0);" #onclick="">
<i class="fas fa-search" />
</a>
</li>
<li class="list-group-item border-0">
<a href="javascript: void(0);" #onclick="">
<i class="fas fa-address-card" />
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="d-none d-md-block">
<!-- Here the list vertically !-->
</div>
</div>
<div class="col-md-9">
</div>
</div>
The problem is that when viewed on mobile devices, the card overflows out of its div. What can I change to make this not happen? Can I decrease the spacing between the items?
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
I created a drop down menu fro my navbar, but it is not working when I hover on it.
My Template,
<header id="header" class="sticky-header" data-sticky-class="not-dark" >
<div id="header-wrap">
<div class="container clearfix">
<div class="divcenter" style="max-width:990px;">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo" style="margin-top: 5px;">
<img src="assets/images/SW-Logo-Final.png" alt="Canvas Logo">
</div>
<span class="inputgroupcss col-sm-5" style="padding-top:12px;">
<input type="email" (keyup)="submit(button1.value)" #button1 class="form-control required email" placeholder="Search by Name or Email"
style="height:38px;">
<div class="col-sm-12 nopadding ">
<ul class="searchlist">
<li *ngFor="let detail of details">
<img [src]='detail.image' alt="profile_image" style="width: 35px;
height: 35px;">
<a (click)="redirect()" [routerLink]="['/demo/user',detail.profilename]">{{detail.profilename}}</a>
</li>
</ul>
</div>
</span>
<!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<!-- <nav id="primary-menu" class="pull-left" style="margin-top:11px">
<form style="width:300px" id="widget-subscribe-form2" action="include/subscribe.php" role="form" method="post" class="nobottommargin">
<div class="input-group input-group-lg divcenter" style="max-width:600px;">
<input type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Search by Name or Email" style="height:38px;">
<span class="input-group-addon" style="height: 38px;padding: 6px 16px;"><i class="icon-line-search"></i></span>
</div>
</form> <div *ngFor="let id of ids" class = "nopadding col-sm-12">
<button class="badge notification" (click) = 'getRequests()'>
<span class="glyphicon glyphicon-bell"></span>
</button>
<span class="noti"> {{id.sent_id}}</span>
</div>
</nav> -->
<nav id="primary-menu" class="dark">
<ul>
<li class="onhovercolor">
<a href="#">
<div>srilatha mattepu</div>
</a>
</li>
<li id="top-cart" class="onhovercolor notopmargin noleftpadding" *ngFor="let id of ids"><i class="icon-email3" style="font-size:18px;color: #d35b29;"></i><span>{{id.sent_id}}</span>
<div class="top-cart-content">
<div class="top-cart-title">
<h6 class="nobottommargin text-center">You have {{id.sent_id}} Requests pending</h6>
</div>
<div class="col-xs-12 dropdownpanel">
<h6 class="nobottommargin">Friend Requests</h6>
</div>
<div class="col-xs-12 dropdownpanel">
<div class="col-xs-3 nopadding">
<img src="assets/images/gallery3.png" style="height:45px;width:50px">
</div>
<div class="col-xs-6 nopadding">
<h5 class="nobottommargin pendingnamescss">srilatha mattepu</h5>
</div>
<div class="col-xs-3 nopadding text-right">
pending
</div>
</div>
<div class="col-xs-12 dropdownpanel">
<div class="col-xs-3 nopadding">
<img src="assets/images/gallery3.png" style="height:45px;width:50px">
</div>
<div class="col-xs-6 nopadding">
<h5 class="nobottommargin requestsnamecss">srilatha mattepu</h5>
</div>
<div class="col-xs-3 nopadding text-right">
pending
</div>
</div>
</div>
</li>
<li class="onhovercolor norightpadding">
<div class="downarrowcss"><i class="icon-caret-down" style="font-size:25px !important"></i></div>
<ul class="menu-pos-invert">
<li>
<a href="/demo/profile">
<div><i class="icon-user"></i> My Profile</div>
</a>
</li>
<li>
<a href="/demo/settings">
<div><i class="icon-settings"></i> Settings</div>
</a>
</li>
<li>
<a href="/demo/password">
<div><i class="icon-settings"></i> Change Password</div>
</a>
</li>
<li>
<a href="#">
<div><i class="icon-off"></i> Logout</div>
</a>
</li>
</ul>
</li>
<li class="onhovercolor hidden-sm hidden-md visible-xs">
<a href="#">
<div>srilatha mattepu</div>
</a>
<ul>
<li>PROFILE</li>
<li>SOCIAL ADDRESSES</li>
<li class="list-borbtom">CUSTOM INFO</li>
<li>MY SOCIETY<span>(ALL)</span></li>
<ul class="left-sub-list">
<li>PERSONAL</li>
<li>PROFESSIONAL</li>
</ul>
<li>REQUESTS</li>
<li>MESSAGES</li>
<li class="list-borbtom">SOCIETY UPDATES</li>
<li class="list-borbtom">SEARCH</li>
<li class="list-borbtom">PASSWORD</li>
<li>SETTINGS</li>
<li>LOGOUT</li>
<li>Qr Code</li>
</ul>
</li>
</ul>
</nav>
<!-- #primary-menu end -->
</div>
</div>
</div>
</header>
I created a drop down menu fro my navbar, but it is not working when I hover on it.
First thing is that you have to use pure Bootstrap Navbar code.
and then simply add below Custom jQuery, and see magic your Drop-down will be open on hover of your parent menu link hover.
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Please check attached fiddle.
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 can't seem to get this to work - my columns go full width.
Here's a JSfiddle for direct use
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li>
<a href="#p1" class="btn btn-primary" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cloud"></span>
</a>
</li>
<li>
<a href="#p2" class="btn btn-primary" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cloud"></span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!--Open Panel Controls-->
<div class="tab-pane active" id="p1">
<!-- HERE IS THE PROBLEM AREA - I want a grid here, but no luck :-/ -->
<div class="row">
<div class="column-md-4" style="background: green;">
This is my first column
</div> <!-- /col emulator-->
<div class="column-md-1">
These are buttons
</div>
</div> <!--/row-->
</div>
<div class="tab-pane" id="p2">
<div class="row">
<div class="column-md-4" style="background: red;">
This is my first column, page 2
</div> <!-- /col emulator-->
<div class="column-md-1">
These are buttons, page 2
</div>
</div> <!--/row-->
</div>
</div> <!-- /tab-content -->
</div> <!-- /panel-body -->
</div> <!-- /panel>
</div> <!-- /container-fluid -->
<script src="/scripts/bootstrap.min.js"></script>
Ouch, simple mistake. Here's the fix
<!-- It's col, not column -->
<div class="col-md-4" style="background: green;">
This is my first column
</div> <!-- /col emulator-->
<div class="col-md-1">