Having difficulty understanding how to remove some padding - html

I am trying to remove padding using Boostrap 4 but having no success.
If you see this image it will make sense:
I am trying to remove the yellow padding that I believe comes from the fluid container.
I tried adding this:
pb-0 mb-0
^ The above are classes to force ZERO padding/margin but still the extra padding is there.
It just feels like it is not in balance....
Here is my HTML
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">Title</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
Thanks for all help


The margin seems to dissapear when you add the mb-0 class to the <ol> element:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
</head>
<body>
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">Title</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


Margin bottom added from class breadcrumb from bootstrap css you can remove it by using below css.
ol.breadcrumb{
margin-bottom:0;
}


Its because of default margin of ul and ol tag just add this css:
ul,ol{
margin: 0;
}

Related

How to change the background color of a bootstrap dropdown list and expanding menu

I want to change the default background color of bootstrap dropdownlist and also the back color of its expanding menu. I had already tried it using my custom CSS, but it remains the same. below is my code
Html code
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#"><img src="images/vertex_logo.png" style="width:80px;height:80px">
</a>
</nav>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
</body>
</html>
main.css
.btn-primary{
background-color: #68889E;
}
.dropdown-menu{
background-color: #6ab446;
border: 1px solid #D9534F;
}

You need to include your CSS after the Bootstrap CSS. So you need to swap those two lines to read:
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css"><!-- AFTER Bootstrap! -->
This allows your code to override the Boostrap CSS, which is included first.
Also, what's with the lone i attribute in your <link> tag? It looks like a typo; I suggest you remove it.
You can also change any of the dropdown states:
.dropdown-toggle {
background-color: red;
}
.dropdown-toggle:hover {
background-color: green;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
background-color: yellow;
}

MaterializeCSS does not work as expected -> JavaScript Missing?

I try to use the materialize.css library. I used the HTML setup with the CDN and copied a navbar inside (https://materializecss.com/getting-started.html)
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav class="nav-extended">
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
</ul>
</div>
</nav>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
The are not aminations, both "Test1" and "Test2" get displayed. I guess there is something missing, because I get no error. Does anyone know how to do this?

I can see you are trying to use tab in navbar. So, you are missing 2 things:
JQuery CDN link
Initialization
You have to refer to this documentation to implement tab: https://materializecss.com/tabs.html
Demo in codepen: https://codepen.io/Bibeva/pen/KKwyqre
Final code:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav class="nav-extended">
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
</ul>
</div>
</nav>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<!--JavaScript at end of body for optimized loading-->
<!-- Jquery CDN Newly Added -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialization Newly Added -->
<script>
$(document).ready(function () {
$('.tabs').tabs();
});
</script>
</body>
</html>

You have to use tab class properly, try the below code
.tab a{
color:#bbb !important;
}
.tab a.active{
color:#eee !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="row ">
<div class="col s12">
<ul class="tabs red lighten-1">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
</div>

bootstrap pagination is overflowing parent div dependant on resolution, how to shrink it or line break it?

Im using boostrap4 theming for my pagination, I've come across an issue when loading the page on smaller resolutions than my monitor whereby the paginate is exceeding the parent div and making for ugly viewing.
here is my sample code:
<div class="col-12 col-md-6 col-lg-3">
<h3 class="text-capitalize">Devices</h3>
<ul id="pager_device" class="pagination-sm mt-1 pagination"><li class="page-item first disabled">First</li><li class="page-item prev disabled">Previous</li><li class="page-item active">1</li><li class="page-item">2</li><li class="page-item">3</li><li class="page-item">4</li><li class="page-item next">Next</li><li class="page-item last">Last</li></ul>
<div id="pager_content_device">
<div class="col-12 results item active">
<div class="pt-4 border-bottom">
<a class="page-url h4 text-primary" href="/config/device_details/460/118/">US-EDGE</a>
<p class="page-description mt-1 text-muted"> Location: US <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
</div>
</div>
<div class="col-12 results item">
<div class="pt-4 border-bottom">
<a class="page-url h4 text-primary" href="/config/device_details/5/1/">UK-EDGE</a>
<p class="page-description mt-1 text-muted"> Location: UK <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
</div>
</div>
</div>
</div>
here's some screenshots when testing against a phone or an iPad
against a phone the col width is 12 and you see if leaving the col
looking against multi cols on an iPad resolution its a mess of paginators overlapping

You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<ul class="pagination pagination-separate pagination-curved synchronized-links">
<li class="page-item first disabled">First</li>
<li class="page-item prev disabled">Prev</li>
<li class="page-item active">1</li>
<li class="page-item">2</li>
<li class="page-item">3</li>
<li class="page-item">4</li>
<li class="page-item">5</li>
<li class="page-item">6</li>
<li class="page-item next">Next</li>
<li class="page-item last">Last</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Simple single page application template bootsrap

I'm trying to make a bootstrap template that fits entirely on one page with a vertical menu bar being the only scrollable element on the page, issue is the entire page is scrollable.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="height:10%;">
<div class="col-lg-12 col-md-12 bg-success">banner</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:80%;">
<div class="col-lg-2 col-md-2 bg-success">Menu</div>
<div class="col-lg-10 col-md-10 bg-warning">content</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:10%;">
<div class="col-lg-12 col-md-12 bg-success">footer</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="height:10vh;">
<div class="col-lg-12 col-md-12 bg-success">banner</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:80vh;">
<div class="col-lg-2 col-md-2 bg-success">Menu</div>
<div class="col-lg-10 col-md-10 bg-warning">content</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:10vh;">
<div class="col-lg-12 col-md-12 bg-success">footer</div>
</div>
</div>
</div>
</body>
</html>

Try this struct, following Bootstrap Documentation.
body, html, main {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.h-10v {
height: 10vh;
}
.h-80v {
height: 80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<header class="bg-secondary h-10v">
Banner here.
</header>
<section class="row bg-dark h-80v">
<div class="col-xs-12 col-sm-12 col-md-4 bg-warning">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 bg-light">
<p>This area content.</p>
</div>
</section>
<footer class="bg-primary h-10v">
This is footer.
</footer>
</main>
</body>
</html>
https://codepen.io/pauloserafimtavares/pen/jpdrBG

bootstrap z-index issue with dropdown button in header

I use bootstrap in my website, i create a new dropdown button and I added in the header, my problem is when I click on dropdown that menu is appear under the others elements, I will add here an image to see what is the problem , I think the problem is z-index:
here is my html code:
<div class="page">
<div class="header-container">
<div class="container">
<div class="row">
<div class="header">
<div class="col-md-4 col-md-offset-0">
<div class="dropdown">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.
.wrapper {
overflow: hidden; // Remove
width: 100%;
}

Try it This Code in your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</body>
</html>