Bootstrap page layout not aligning correctly - html

I am creating a simple SPA using bootstrap. I am having difficulty getting the sections of the UI to "line up" correctly.
Here is my HTML & CSS so far:
<!DOCTYPE HTML>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Treeview styling -->
<link rel="stylesheet" href="css/tree.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Title</title>
</head>
<body>
<style>
body{
padding: 3px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding-left: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
hr.menu-seperator {
margin: 3px 0px;
}
/* display area */
#display-area {
border: 1px solid grey; min-height: 400px;
}
/* Icon bar Styling */
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 10%;
text-align: center;
padding: 10px 0;
transition: all 0.3s ease;
color: white;
font-size: 12px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="dropdown">
<button class="dropbtn">File</button>
<div class="dropdown-content">
<a id="menu-item1" href="#" class="menu-item" data-toggle="modal" data-target="#exampleModal">Menu Item 1</a>
<a id="menu-item2" href="#" class="menu-item" data-toggle="modal" data-target="#exampleModal">Menu Item 2</a>
<a id="menu-item3" href="#" class="menu-item" data-toggle="modal" data-target="#exampleModal">Menu Item 3</a>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="icon-bar">
<i class="fa fa-home fa-lg"></i>
<i class="fas fa-search fa-lg"></i>
<i class="fas fa-envelope fa-lg"></i>
<i class="fas fa-globe fa-lg"></i>
<i class="fas fa-trash fa-lg"></i>
</div>
</div>
</div>
<hr class="menu-seperator"/>
<div id="display-area" class="row no-gutters">
<div class="col-sm-12">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="col-sm-11" id="target"></div>
<div class="col-sm-1 panel">
<h4>Control</h4>
<div class="score">
<div class="dataScore"></div>
<div class="priceScore"></div>
</div>
<div class="circleDrawn">Count: 0</div>
<button class="reset">Reset</button>
<button class="toggleDraw">Draw</button>
<button class="saveData">Save</button>
<button class="plotCircles">Plot</button>
</div>
<div class="delete" style="display: none;">
<div class="confirm">Confirm</div>
<div class="action">
<div class="yes">Yes</div>
<div class="no">No</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
</div>
</div>
</div>
<!-- Modal forms -->
<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="modal-title" class="modal-title">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="tree" style="height: 200px; overflow-y: scroll;"></div>
</div>
<div class="modal-footer">
<button id="btn-just-do-it" type="button" class="btn btn-primary">Open</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Here are the issues on the page:
I want the block in green surrounding the menu 'File' to be the same height as the navbar shown on the right, and the text 'File' to be vertically centered within that block in green. Using height: 100%; on the element has no effect.
I want the icons in the div.icon-bar to be floated right, but if I apply float: right; to the element, all of the icons are bunched up to the right.
In the div with id nav-home, I have two nested divs with "columns" (classes) col-sm-11 and col-sm-1. the former is to hold an SVG object, and the latter is to display a 'control panel'. However, the section for the SVG is not displayed at all (or has width=0px) and the single column element issue is shown left-adjusted instead.
What is causing these issues and what is the solution?

Related

content of a section appearing in another section

In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.

Bootstrap 5 Horizontal Scrolling to Nothing

On every page I make, the page is able to scroll horizontally a tiny bit. When it scrolls, there is nothing there, the footer and header ends at the edge of the screen and just scrolls into white. It is only a little, but is annoying as the scroll bar takes up room on my tiny laptop.
[notice the white space to the side of the header.][1]
[1]: https://i.stack.imgur.com/mHSDx.png
As this happens on every page, I have a feeling it has something to do with my CSS for the header or footer, although I cant figure out which. I have included my CSS and my home page below.
I was hoping someone could help end the horizontal scrolling.
CSS:
#navbar {
background-color: #1A409F;
position: center;
}
#NavBrandText {
color: white;
text-decoration: none;
font-style: italic;
font-family: Helvetica-UltraCompressed;
letter-spacing: 1px;
padding-right: 80px;
}
#font-face {
font-family: Helvetica-UltraCompressed;
src: url(Helvetica-UltraCompressed.otf);
}
#offcanvas-subheading {
font-size: 30px;
padding-right: 15px;
}
#offcanvas-body {
font-size: 20px;
padding-left: 10px;
text-decoration: none;
color: black;
}
#navlogo {
width: 80px;
}
#offcanvas-open {
border-style: solid;
border-color: #2149ae;
border-width: 5px;
border-radius: 5px;
color: white;
}
#menuButton {
height: 20px;
width: 20px;
}
.carousel-control-prev {
padding-right: 150px;
}
.carousel-control-next {
padding-left: 150px;
}
#footer {
background-color: #292929;
padding-top: 20px;
padding-bottom: 20px;
}
.footer-top .container {
padding-bottom: 10px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row:before {
display: table;
content: " ";
}
.col-sm-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.footernote {
display: block;
text-align: center;
margin-bottom: 0;
}
.footernote li {
display: inline-block;
color: #fff;
}
#before:before {
font-family: FontAwesome;
content: " \f111 ";
font-size: 7px;
margin: 5px;
vertical-align: middle;
color: #fff;
}
.ul {
padding: 0;
margin-top: 0;
}
.ul li {
list-style: none
}
#SystemBuilder {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
height: 1000px;
}
#ProductHead {
margin-left: 25px;
}
Home Page HTML
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Require Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN - Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- CDN - FontAwesome -->
<script src="https://kit.fontawesome.com/fe972dc1f9.js" crossorigin="anonymous"></script>
<!-- Title -->
<title>Jailbreak Computers</title>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="Images/Jailbreak Computers Icon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="Style.css">
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-dark d-flex justify-content-between" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" style="color: white;" href="Home Page.html">
<img src="Images/Jailbreak Computers Logo.png" alt="logo" id="navlogo" class="rounded-circle">
</a>
<a id="NavBrandText" href="Home Page.html">
<h1 style="font-size: 437.5%;">Jailbreak Computers</h1>
</a>
<ul class="navbar-nav">
<button class="btn" type="button" id="offcanvas-open" data-bs-toggle="offcanvas" data-bs-target="#pages">
<i id="menuButton" class="fas fa-bars"></i>
</button>
</ul>
</div>
</nav>
<!-- Offcanvas Pages Menu -->
<div class="offcanvas offcanvas-end" id="pages">
<div class="offcanvas-header">
<h1 class="offcanvas-title" id="offcanvas-title"><center>Pages</center></h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul style="list-style-type:none;">
<h3 class="display-3" id="offcanvas-subheading">PC Components</h3>
<li><a id="offcanvas-body" href="PCCOM_CPUs.html">CPUs</h5></a></li>
<li><a id="offcanvas-body" href="PCCOM_MBD.html">Motherboards</a></li>
<li><a id="offcanvas-body" href="PCCOM_Memory.html">Memory</a></li>
<li><a id="offcanvas-body" href="#">Storage Devices (HDD/SSD)</a></li>
<li><a id="offcanvas-body" href="#">Graphics Cards</a></li>
<li><a id="offcanvas-body" href="#">Power Supply</a></li>
<li><a id="offcanvas-body" href="#">Case</a></li>
<li><a id="offcanvas-body" href="#">Accessories</a></li>
<br>
<li><a id="offcanvas-body" href="PCCOM_SystemBuilder.html">System Builder</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Peripherals</h3>
<li><a id="offcanvas-body" href="#">Keyboards</a></li>
<li><a id="offcanvas-body" href="#">Mice & Mousepads</a></li>
<li><a id="offcanvas-body" href="#">Monitors</a></li>
<li><a id="offcanvas-body" href="#">Headsets/Speakers</a></li>
<li><a id="offcanvas-body" href="#">Microphones</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Software</h3>
<li><a id="offcanvas-body" href="#">Apps</a></li>
<li><a id="offcanvas-body" href="SW_Games.html">Games</a></li>
<li><a id="offcanvas-body" href="#">Operating Systems</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Other</h3>
<li><a id="offcanvas-body" href="#">Competitions</a></li>
</ul>
</div>
</div>
<!-- Carousel -->
<div id="Carousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="4"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://www.microsoft.com/en-au/windows/windows-11" target="_blank">
<img src="Images/Windows 11.gif" alt="Windows 11" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=EPOS%20H6PRO" target="_blank">
<img src="Images/EPOS Headset.gif" alt="EPOS Headsets" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/Intel-Game-Bundle-Q4" target="_blank">
<img src="Images/IntelPromo.jpg" alt="Intel Promo" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=+%20BONUS%20USD%20Steam%20Voucher!*" target="_blank">
<img src="Images/MSIPromo.png" alt="MSI Promo" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=BONUS%20Far%20Cry%206!*" target="_blank">
<img src="Images/SamsungPromoFarCry.jpg" alt="Samsung Promo" class="d-block w-100">
</a>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#Carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#Carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br>
<br>
<!-- Vertically Centered Cookies Modal -->
<div class="modal fade" id="onload" tabindex="-1" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" id="onload">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal">Do You Want A Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
<strong>This site uses cookies</strong> to personalise the content for you. We legally have to ask you to accept these for marketing and advertising purposes. Cookies are used by third-parties to offer ads suited and tailored to you.<br>
<strong>Just kidding. We dont really use cookies.</strong> There are no ads on this site sponsored by third-parties, but to be annoying, we do ask you disable you Ad Blocker so we do get paid for ads.
</div>
<div class="modal-footer">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">
<button type="button" class="btn btn-secondary">More Information</button>
</a>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Accept & Close</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="row">
<div class="col-sm-12">
<ul class="footernote">
<li>Local Partners: Computer Alliance and Umart</li>
</ul>
<ul class="footernote">
<li>Showroom Open 7 Days</li>
<li id="before">
Monday to Friday 8am to 5pm
</li>
<li id="before">
Thursday 8am to 7pm
</li>
<li id="before">
Saturday 9am to 5pm
</li>
<li id="before">
Sunday 9am to 4pm
</li>
</ul>
<ul class="footernote">
<li>Cnr Manly Rd & New Clevland Rd, Tingalpa</li>
<li id="before">Phone 07 2667 8837 (07 COMPUTER)</li>
<li id="before">Email sales#jailbreakcomputers.com.au</li>
</ul>
</div>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
window.onload = () => {
$('#onload').modal('show');
}
</script>
</body>
</html>
Thanks,
Pilot640
the problem is in the footer.
Since .row has negative left and right margin, you have to insert a .container between the <footer> and the .row.

good way to make navbar responsive

i have a navbar with 3 buttons on the left hand side and a search bar on the right hand side. i believe i wrote bad(not the proper way) code to make them responsive but still they are not responsive for medium and smaller screens. i am just trying to figure out the good way to make them responsive. i am trying to make a page as shown in the below image.
stackblitz link
.searchbar{
width: 400px;
}
.btn-primary{
background-color: #002B42;
padding:10px;
font-size: 12px;
border-radius: 4px;
margin-left: 3px;
font-family: Arial, Helvetica, sans-serif;
}
.btn-light{
margin-left: 30px;
padding:10px;
background-color: transparent;
border: none;
color: black;
font-size: 13px;
outline: none;
}
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<button type="button" class="btn btn-primary"><i class="fa fa-bars" aria-hidden="true"> SAVED LISTS</i></button> </li>
<li class="nav-item">
<button class="btn btn-light"> <i class="fa fa-filter" aria-hidden="true"> SAVED FILTER</i> </button>
</li>
<li class="nav-item">
<button class="btn btn-light"> <i class="fa fa-history" aria-hidden="true"> SEARCH HISTORY</i> </button>
</li>
</ul>
<div class="ml-auto">
<input class="form-control searchbar" name="search" [(ngModel)]="search" type="search" placeholder="Search" />
</div>
</nav
First of all, you don't need to set the width 400px for the .searchbar class.
By setting a media query, unfix the navbar for smaller widths. This is more suitable for the user experience.
In my opinion, the most standard is the one Bootstrap itself suggests.
It's best to insert your <ul class="navbar-nav mr-auto"> into the <div class="collapse navbar-collapse" id="my-navbar"> and place a button as navbar toggler.
And use the my-2 my-md-0 class instead of the ml-auto class for search wrapper
as below
body{
padding-top: 60px;
}
.search-wrapper{
flex-grow: 1;
}
.btn-primary{
background-color: #002B42;
font-size: 12px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
}
.btn-light{
background-color: transparent;
border: none;
color: black;
font-size: 13px;
outline: none;
}
.items{
margin-top: ;
}
#media only screen and (max-width: 768px) {
body{
padding-top: 0!important;
}
.navbar{
position: relative;
}
.navbar-nav{
align-items: center;
margin: 15px 0;
}
.nav-item{
margin:10px 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar" aria-controls="my-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<button type="button" class="btn btn-primary"><i class="fa fa-bars" aria-hidden="true"> SAVED LISTS</i></button> </li>
<li class="nav-item">
<button class="btn btn-light"> <i class="fa fa-filter" aria-hidden="true"> SAVED FILTER</i> </button>
</li>
<li class="nav-item">
<button class="btn btn-light"> <i class="fa fa-history" aria-hidden="true"> SEARCH HISTORY</i> </button>
</li>
</ul>
</div>
<div class="my-2 my-md-0 search-wrapper">
<input class="form-control searchbar" name="search" [(ngModel)]="search" type="search" placeholder="Search" />
</div>
</nav>
<div class="items">
<ol>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
<li>dhsiudshdsds</li>
</ol>
</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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>

Bootstrap 4 make search field responsive in mobile

I tried to center my search field using code below.
But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.
This issue only displays on small screen mode.
Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 100px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Grid system doesn't resize properly on mobile devices or small screen

Command col-xs-whatever doesn't work and makes break lines on mobile view or small screens.
Note: I also tested the class .col- as Bootstrap 4 specifies in the documentation but it still doesn't work.
It doesn't resize properly and pile up, here is the relevant code:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchFormContent{
margin: auto;
width: 80%;
}
#navToggler{
float: right;
}
.navbar-toggler{
float:right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<div class="col-12">
<nav class="navbar sticky-top navbar-expand-md">
<div class="col-xs-1 col-md-2">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-xs-10 col-md-7">
<form class="form-inline" id="searchForm" role="search">
<div class="input-group" id="searchFormContent">
<input class="form-control" type="text" placeholder="Busqueda">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<span id="destiny1"></span>
</div>
<div class="col-xs-1 col-md-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
<span id="destiny2"></span>
</div>
</nav>
</div>
</section>
</div>
</body>
I don't know if this is your desired outcome as you did not specify.
I changed col-xs-whatever to col-whatever after that you were applying margin and border on a row with CSS applied to #mainNav that is why all columns could not fit inside.
So I moved row in a wrapping nav and removed row from #mainNav
Here is changed code:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchFormContent{
margin: auto;
width: 80%;
}
#navToggler{
float: right;
}
.navbar-toggler{
float:right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<section id="mainNav">
<nav class="navbar sticky-top navbar-expand-md row">
<div class="col-2 col-md-2">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-8 col-md-7">
<form class="form-inline" id="searchForm" role="search">
<div class="input-group" id="searchFormContent">
<input class="form-control" type="text" placeholder="Busqueda">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<span id="destiny1"></span>
</div>
<div class="col-2 col-md-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
<span id="destiny2"></span>
</div>
</nav>
</section>
</div>
as suggested by iamwtk, part of the problem is that you have to use col-XYZ in place of col-xs-XYZ, but the biggest problem is the content of the grid: both Brand and Busqueda exceed the width of the col, breaking the row... try play a little with col distribution and changing the width of "searchFormContent" making it dynamic ;)