I am quite new to Bootstrap 4. I can't seem to get my 3 buttons centered in the middle of the page. I am using Bootstrap-4. I feel it is something simple I am missing. Also is there a way to extend the buttons a little more outside the text, would I use padding for that? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Sanchez</a>
<!--Toggle Button-->
<button class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"aria-controls="navbarTogglerDemo01" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" a href="Sanchez_Bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="Sanchez_bootstrap_portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="Sanchez_bootstrap_contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="content">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html">Web
Developer</a>
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html">Portfolio</a>
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html">Contact</a>
</<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
CSS
body{
background-image: url('images/background3.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
html{
height: 100%;
}
#content{
align-items: center;
text-align: center;
}
Please share a screenshot of the web page and the problem to explain it better. Also, there are few points I would like to bring to attention.
Why are you not including jquery.min.js in the head when bootstrap nav depends on it to work? It should be before bootstrap src
You have a typo </<div> please check your code
What do mean by centering the buttons?
You mean centering side by side? like this: or you mean centering as in stacked?
For the former case, I used this code:
<div id="content">
<div class="container text-center" style = "vertical-align:middle;
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" >
<div class="row" style = "line-height: 20em;">
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html" >Web
Developer</a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html" >Contact</a>
</div>
</div>
</div>
</div>
</div>
For the latter, I used:
<div id="content">
<div class="container text-center">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html" >Web
Developer</a>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html" >Contact</a>
</div>
</div>
</div>
</div>
</div>
For bootstrap divs, think about dividing divs in to subdivs and then give them elements. For col-lg-12, we have 12 blocks. If you want three inner elements, divide 12 by 3 which is 4. So wrap each of the three elements in col-lg-4. The width would be: 100/3 = 33.33% Similarly, if you want three elements with each 100% wide, wrap the three in each col-lg-12 div and each will have width of 100/1 = 100%
Its better to have a habit of specifying lg, sm, xs and md when you are writing the code itself and use a mobile first development methodology to think how its gonna look on each mobile devices right away. i.e. specify col-lg-12 col-sm-12 col-xs-12 col-md-12 in each div.
Note: I used your code in an ongoing project, so few css have been inherited form my code, like font width, button coloring, background etc
Related
How to solve div overlay problem here I've one div in this div I've added two class col-sm-6. But when I am checking responsive it will going over of the div. I don't know how to solve. can anyone please help me.
I've attch the image of the output you can see :)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
<div class="row">
<div class="col-sm-6">
<p><strong>Showing 1 to 6 of 6 entries</strong></p>
</div>
<div class="col-sm-6" style="top: -8px;">
<div class="pagination">
<button class="btn btn-link previous">Previous</button>
<button class="btn btn-info number">1</button>
<button class="btn btn-link next">Next</button>
</div>
</div>
</div>
</div>
have found mobile grid class (col-xs-12) missing. Please try below snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="block">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p><strong>Showing 1 to 6 of 6 entries</strong></p>
</div>
<div class="col-xs-12 col-sm-6">
<div class="pagination">
<button class="btn btn-link previous">Previous</button>
<button class="btn btn-info number">1</button>
<button class="btn btn-link next">Next</button>
</div>
</div>
</div>
</div>
you should set the div "col-12" for mobile size in bootstrap4."col-sm-6" don't work for size less than 557px.and make your div's "float" right.
.float-right{
float:rigth !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
<div class="row">
<div class="col-sm-6 col-12 float-right">
<p><strong>Showing 1 to 6 of 6 entries</strong></p>
</div>
<div class="col-sm-6 col-12 float-right" style="top: -8px;">
<div class="pagination">
<button class="btn btn-link previous">Previous</button>
<button class="btn btn-info number">1</button>
<button class="btn btn-link next">Next</button>
</div>
</div>
</div>
</div>
I have a site in which the header image is not displaying correctly in mobile. I'm using bootstrap 4, so the site should be responsive. But when I load my site in mobile browser the header image repeats. I remove the no-repeate in css, but then the image covers half of the div, the other half is blank. The header works just fine in laptop, and desktop. is just mobile I'm having problem displaying.
here's the site JV Computers
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>JV Computer Service</title>
<meta name="description" content="JV Computer Service main page">
<meta name="keywords" content="Desktop Support, Computer Repair, Virus Removal, Data Recovery, Server Administration, Printer Repair, Network Installation, Wireless, Website Development">
<meta name="author" content="JV Computer Servic"e>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="wireframe.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container"> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar13"> <a class="navbar-brand d-none d-md-block" href="#">
<img class="head-logo" src="../../work/graphics/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" >
<b><span class="title"> JV Computer Service</span> (305) 680 4659</b>
</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="support.html">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="https://twitter.com/geoVT25" target="_blank">
<i class="fa fa-twitter fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/pctechtips25" target="_blank">
<i class="fa fa-facebook fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/channel/UCOH7oeWBE2pgcFPFmj7lCqw" target="_blank">
<i class="fa fa-fw fa-youtube"></i>
</a> </li>
</ul>
</div>
</div>
</nav>
<div class="text-center py-5 head-section" >
<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-md-9">
<h1><strong>Simplified IT Solutions</strong></h1>
<h2 class="bg-warning">Technology solutions for small business and homes</h2>
learn more
get support
</div>
</div>
</div>
</div>
<div class="py-4 bg-light" id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead text-center">Bellow you can see a brief description of our services and price. These fall into three main category: Desktop Support, System Maintanance, and Network Installation. If you would like to know more details, go to the Service page.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card box-shadow rounded border border-secondary" >
<img class="card-img-top" src="assets/styleguide/thinkstockphotos-479282847.jpg">
<div class="card-body">
<h3 class="text-center">Desktop Support</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 contenteditable="true">60 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1506399309177-3b43e99fead2.jpg">
<div class="card-body">
<h3 class="text-center">System Administration</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 style="">100 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1544197150-b99a580bb7a8.jpg">
<div class="card-body">
<h3 class="text-center">Network Installation</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5>150 $ 1hr</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">About Us</h1>
<p>JV Computer Service is a small Computer Repair and IT Solution company. It's own and operated by its owner who has over 20 years experience in the computer and IT field. He acquired most of his experience working for the school district and managing and supporting multiple schools with over 500 computers. During that time he was responsible for providing user support, and system administration​.<br>He was responsible for the management and completion of several projects. One project, involved the installation of more than 100 computers in a new student building. This project included physical installation of PC's, cabling, and rolling out the operating system and different application. </p>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark" id="contact">
<div class="container">
<div class="row">
<div class="mx-auto text-center col-lg-8">
<h1 class="mb-3">Contact Us</h1>
<p class="lead mb-4">If you experiencing any computer issues, lets us assist you. Fill the form bellow with a description and phone</p>
</div>
</div>
<div class="row">
<div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&q=New%20York&ie=UTF8&t=&z=14&iwloc=B&output=embed" scrolling="no" frameborder="0"></iframe> </div>
<div class="px-4 order-1 order-md-2 col-lg-6">
<h2 class="mb-4">Create a ticket</h2>
<form>
<div class="form-group"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
<div class="form-group"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
<div class="form-group"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-secondary text-dark">
<div class="container">
<p class="float-right text-dark">
Back to top
</p>
<p>JV Computer Service website was designed with Pingendo and Bootstrap<br>All rights reserved JV Computer Service LLT</p>
</div>
</footer>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS code
.head-logo {
background-image: url(assets/styleguide/logo.png);
background-position: top left;
background-size: 100%;
background-repeat: repeat;"
}
.title {
color:#f9b751;
}
.head-section {
background-image: url(assets/styleguide/jonathan-SwVkmowt7qA-unsplash.jpg);
background-position: left top;
background-size: 100%;
background-repeat: repeat;
}
.card {
border-style: solid;
}
.card-img-top {
background-position: top left;
background-size: 100%;
background-repeat: no-repeat;
}
this should do it: background-size: cover;
I am creating a menu using Bootstrap 4. This is my current code:
<div class="row mx-2">
<div class="dropdown">
<div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
Option 1
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO11
</div>
<a href="abc.php" class='dropdown-item'>DDO12</a>
</form>
</div>
</div>
<div class="dropdown">
<div class="btn btn-info dropdown-toggle mx-3" data-toggle='dropdown'>
Option 2
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO21</div>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO22</div>
</div>
</div>
<div class="btn btn-dark col mx-2" onclick="dosomething()">Option3</div>
<div class="dropdown">
<div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
Option 4
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDOP41</div>
</div>
</div>
<div class="btn btn-dark col mx-2">Option 5</div>
</div>
The problem is that the dropdown buttons are as wide as text, while the non-dropdown buttons are too wide and taking up all the left over space. I need all the option buttons to be of same width.
I tried assigning width:20% and also tried col-*-* on all of the parent option buttons, but nothing worked.
What else can be done to achieve equal width for all option buttons?
You need add CSS like below in your CSS file
.dropdown-menu {
min-width: unset !important; // add width as per your need
}
Live Demo
Hope it will solve your problem
Using the Bootstrap approach, I suggest you to made a grid (a grid have 12 columns) with one row and five columns with class col-sm-2 (On XS screens the layout should be different because of the small total width you have). To make this centered, just add a offset-sm-1 class to the first col-sm-2 item. And to make buttons have the full-width of the column that wraps it, just use the btn-block class. I made changes to your example to make this work:
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="offset-sm-1 col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 1
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO11
</div>
<a href="abc.php" class='dropdown-item'>DDO12</a>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 2
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO21
</div>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO22
</div>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="btn btn-dark btn-block" onclick="dosomething()">Option3</div>
</div>
<div class="col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 4
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDOP41
</div>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="btn btn-dark btn-block">
Option 5
</div>
</div>
</div>
</div>
In Bootstrap 4, the row class should only be used to contain col* and not other elements like btn and dropdown. The other elements are placed inside the columns. From the Bootstrap docs...
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... In
a grid layout, content must be placed within columns and only columns
may be immediate children of rows."
Put the dropdown and btn in columns. Use the auto-layout grid (col or col-auto) to control the equal widths. For buttons that fill the width of their parent use btn-block.
For full equal width use col...
<div class="row mx-2">
<div class="col">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
Option 1
</div>
<div class="dropdown-menu">
...
</div>
</div>
</div>
<div class="col">
<div class="btn btn-dark btn-block mx-2">Option3</div>
</div>
...
</div>
</div>
For "shrink to fit" content width use col-auto...
<div class="row mx-2">
<div class="col-auto">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
Option 1
</div>
<div class="dropdown-menu">
...
</div>
</div>
</div>
<div class="col-auto">
<div class="btn btn-dark btn-block mx-2">Option3</div>
</div>
...
</div>
</div>
Demo of both options
I want display a button to the center of the row, having on the same line a text aligned to the left:
<div class="col-xs-1">
<div class="card-header">
<h4 class="card-title">set</h4>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
</div>
</div>
The problem is that I got this result: https://jsfiddle.net/DTcHh/96757/
Bootstrap has tons of classes to play with.
One of possible solutions:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid card-header btn-group">
<h4 class="card-title">set</h4>
<div class="text-center container">
<button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
</div>
</div>
I am trying to learn the basics of bootstrap for responsive websites. When I put elements into the "row" class then there is not any margins or padding to the elements and no free space, but with elements such as jumbotron and the navbar then there seems to be padding i cant get rid of on the left and right side.
Any help would be appreciated.
<nav class="navbar navbar-expand-lg navbar-expand-md">
<a class="navbar-brand" href="#">lorem ipsum</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
<div class="container-fluid">
<h1 class="display-4">lorem ipsum</h1>
<p class="lead">lorem ipsum</p>
</div>
</div>
<div class="row newsletter">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
<form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
<input type="email" placeholder="enter your email..." class="box">
<button type="submit" class="button">></button>
</form>
</div>
Boostrap by default apply padding on the navbar you can remove right and left padding by simply doing that:
.navbar.custom-navbar {
padding-left: 0rem !important;
padding-right: 0rem !important;
}
apply custom-navbar class on <nav> element.
To remove jumbotron left and right padding remove <div class="container-fluid"> which is inside jumbotron like that:
<div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
<h1 class="display-4">odtom.com</h1>
<p class="lead">a site showcasing everything odt.</p>
</div>
Also to remove horizontal scroll from the page place the row inside conatiner-fluid.
<div class="container-fluid">
<div class="row newsletter">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
<form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
<input type="email" placeholder="enter your email..." class="box">
<button type="submit" class="button">></button>
</form>
</div>
</div>
I'm not sure if this will answer your question, but the left and right paddings in the jumbotron element are coming from the ".container-fluid" class. It seems that you are targeting the container with the ".jumbotron-fluid" class, which is the one currently set to padding-left and right to 0px.
Just target this class to remove or amend the paddings if that's what you need.
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}