I have a problem:
I want to create a layout but a horizontal scrollbar appears as soon as i remove the padding at the following line of codes (p-0). Is there a chance that i can remove the padding and no scrollbar to appear? I dont know what to do, maybe you guys can help me. The problem is I want to have the col the full length without padding, but when I remove the padding the horizontal scrollbar appears.
...
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...
<!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.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Nachrichten
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Eingabe
<div class="row">
Form
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Probably you've implemented your grid incorrectly. Avoid to add additional styles to bootstrap classes and use .row when needed. When you need custom styles use wrappers inside .container, .row and .col so you can manage them without altering bootstrap behavior.
In your case, I would remove the class row from the parent div of p-0, then remove the class col-md-12 from p-0, setting the p-0 width to 100% and removing the properties padding:0px. Anyway, I think you've additional issues in your nested elements so good lectures for you are:
How the Bootstrap 4 Grid Works
How Box model works
Just like your earlier question (with an ill-advised accepted answer to use m-auto), the actual problem is the grid isn't properly structured.
The grid must be container > row > col-*s > row > col-*s, etc...
Simple answer:
"How to remove horizontal scrollbar when using no padding"
Follow the correct grid structure...
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
and, follow the correct grid structure when nesting columns...
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
</div>
</div>
Then there will not be a horizontal scrollbar!
Demo
Complete answer (TL;DR)
Read the Bootstrap docs...
"Containers are the most basic layout element in Bootstrap and are
required when using our default grid system. "
"Rows are wrappers for columns.... In
a grid layout, content must be placed within columns and only columns
may be immediate children of rows."
1 - The grid requires a container -- choose container-fluid for full width
2 - Columns and only columns are the immediate children of .row, not other columns. Read about nesting.
3 - Rows are only used to wrap columns. Content should not be placed directly in the .row.
Comparing your code to the grid structure "rules"...
One problem is here....
<div class="col-md-8 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
</div>
</div>
</div>
</div>
You have a col-12 nested immediately in another col-12 which won't work. The correct structure is...
<div class="col-md-8">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
content here
</div>
</div>
</div>
</div>
</div>
Secondly, the columns and rows are being overused. There's no reason to have 12-unit columns inside more rows with 12-unit columns. There's also no reason to use the same size at every breakpoint...
col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12
is the same as:
col-12
Finally, there should only be one outer container fluid, not containers nested inside containers. There is a special no-gutters class if you want to remove the spacing around or between columns, which is the correct method of removing the gutters (padding) on an entire row.
The entire markup can be greatly simplified by just following the correct grid stucture. You'll save a lot of time by simply understanding how the grid works...
container > row > (columns with content) > row > (columns with content), etc...
In the div class=row with col-md-8, delete the margin-right and left with -15px;
I'm following this video tutorial https://www.youtube.com/watch?v=36jRXMsIFuA
I am using bootstrap 5.0.0 beta 1
My code is following:
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
And it looks like this, and when I click the button there is no dropdown. Layout is messed up as well.
my website
Compared to tutorial:
tutorial picture
The tutorial's using Bootstrap 4.3.1, the 4th version rather than the newest 5.0. If you switch to v4, your dropdown would works. Since a major update of a framework (increase of the first version number) is always not compatible to below versions.
About the layout, there's a mistake in your code. You need to put your <h2> tag within the tag with a background color and a style, the above <div> tag.
So, change the lines below:
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
To:
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm trying to vertically center my column content.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container d-flex h-100">
<div class="row mt-5 ">
<div class="col-sm-7 about-us">
<div class="row h-100 justify-content-center align-items-center">
<h3 class="display-3 strong ">
{{ __('Message From Chief ') }}
</h3>
<p>
{{ __('This is a sample text') }}
</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
But when I tried the above code it is giving me a massive gap in between the heading and para.
So how can I properly align my texts vertically center and where am I doing wrong here
I'm using Bootstrap 4 and Laravel.
Just add min-vh-100 in your .container class and add align-content-center in your row class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container d-flex min-vh-100">
<div class="row">
<div class="col-sm-7 about-us">
<div class="row h-100 justify-content-center align-items-center align-content-center flex-column">
<h3 class="display-3 strong ">Message From Chief</h3>
<p>This is a sample text</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Just add .h-100 in your .container class , add .h-100 in your row class and add .my-auto in your col class.
<div class="container h-100">
<div class="row h-100">
<div class="col-sm-7 about-us my-auto">
<div class="row h-100 justify-content-center align-items-center">
<h3 class="display-3 strong ">
{{ __('Message From Chief ') }}
</h3>
<p>
{{ __('This is a sample text') }}
</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
</div>
</div>
</div>
I am using Bootstrap 4+ to create a card with collapsable card-body, triggered by a link in the card-head.
<div class="card text-left mb-3 mt-3">
<div class="card-head p-3">
<h4>How do we get started?</h4>
<a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
More
</a>
</div>
<div class="collapse" id="collapse1">
<div class="card card-body">
<p>Content</p>
</div>
</div>
</div>
The tag showing "more" is not lining up vertically inline with the heading element next to it.
It looks like this in chrome:
How can I get the heading and "More" link (vertically) inline with each other? thereby reducing the wasted vertical height.
Just add d-flex justify-content-between classes with your card-head class will resolve your issue. I hope it'll help you out. Thanks
Bootstrap 4 Flexbox - Documentation
<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">
<div class="card text-left mb-3 mt-3">
<div class="card-head p-3 d-flex justify-content-between">
<h4>How do we get started?</h4>
<a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
More
</a>
</div>
<div class="collapse" id="collapse1">
<div class="card card-body">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
You can use d-flex align-items-center which is available in Bootstrap 4+ in your card-head and also you don't need to use float-right instead you can use ml-auto. Something like this
<div class="card text-left mb-3 mt-3">
<div class="d-flex align-items-center card-head p-3">
<h4>How do we get started?</h4>
<a class="ml-auto" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
More
</a>
</div>
<div class="collapse" id="collapse1">
<div class="card card-body">
<p>Content</p>
</div>
</div>
</div>
CSS and below is the HTML
/*!
* Start Bootstrap - Grayscale v5.0.2 (https://startbootstrap.com/template-overviews/grayscale)
* Copyright 2013-2018 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
*/#mainNav{min-height:56px;background-color:#fff}#mainNav .navbar-toggler{font-size:80%;padding:.75rem;color:#64a19d;border:1px solid #64a19d}#mainNav .navbar-toggler:focus{outline:0}#mainNav .navbar-brand{color:#161616;font-weight:700;padding:.9rem 0}#mainNav .navbar-nav .nav-item:hover{color:fade(white,80%);outline:0;background-color:transparent}#mainNav .navbar-nav .nav-item:active,#mainNav .navbar-nav .nav-item:focus{outline:0;background-color:transparent}#media (min-width:992px){#mainNav{padding-top:0;padding-bottom:0;border-bottom:none;background-color:transparent;-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out}#mainNav .navbar-brand{padding:.5rem 0;color:rgba(255,255,255,.5)}#mainNav .nav-link{-webkit-transition:none;transition:none;padding:2rem 1.5rem;color:rgba(255,255,255,.5)}#mainNav .nav-link:hover{color:rgba(255,255,255,.75)}#mainNav .nav-link:active{color:#fff}#mainNav.navbar-shrink{background-color:#fff}#mainNav.navbar-shrink .navbar-brand{color:#161616}#mainNav.navbar-shrink .nav-link{color:#161616;padding:1.5rem 1.5rem 1.25rem;border-bottom:.25rem solid transparent}#mainNav.navbar-shrink .nav-link:hover{color:#64a19d}#mainNav.navbar-shrink .nav-link:active{color:#467370}#mainNav.navbar-shrink .nav-link.active{color:#64a19d;outline:0;border-bottom:.25rem solid #64a19d}}.masthead{position:relative;width:100%;height:auto;min-height:35rem;padding:15rem 0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(22,22,22,.1)),color-stop(75%,rgba(22,22,22,.5)),to(#161616)),url(../img/bg-masthead3.jpg);background:linear-gradient(to bottom,rgba(22,22,22,.1) 0,rgba(22,22,22,.5) 75%,#161616 100%),url(../img/bg-masthead3.jpg);background-position:center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover}.masthead h1{font-family:'Varela Round';font-size:2.5rem;line-height:2.5rem;letter-spacing:.8rem;background:-webkit-linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.masthead h2{max-width:20rem;font-size:1rem}#media (min-width:768px){.masthead h1{font-size:4rem;line-height:4rem}}#media (min-width:992px){.masthead{height:100vh;padding:0}.masthead h1{font-size:6.5rem;line-height:6.5rem;letter-spacing:.8rem}.masthead h2{max-width:30rem;font-size:1.25rem}}.btn{-webkit-box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;padding:1.25rem 2rem;font-family:'Varela Round';font-size:80%;text-transform:uppercase;letter-spacing:.15rem;border:0}.btn-primary{background-color:#64a19d}.btn-primary:hover{background-color:#4f837f}.btn-primary:focus{background-color:#4f837f;color:#fff}.btn-primary:active{background-color:#467370!important}.about-section{padding-top:10rem;background:-webkit-gradient(linear,left top,left bottom,from(#161616),color-stop(75%,rgba(22,22,22,.9)),to(rgba(22,22,22,.8)));background:linear-gradient(to bottom,#161616 0,rgba(22,22,22,.9) 75%,rgba(22,22,22,.8) 100%)}.about-section p{margin-bottom:5rem}.projects-section{padding:10rem 0}.projects-section .featured-text{padding:2rem}#media (min-width:992px){.projects-section .featured-text{padding:0 0 0 2rem;border-left:.5rem solid #64a19d}}.projects-section .project-text{padding:3rem;font-size:90%}#media (min-width:992px){.projects-section .project-text{padding:5rem}.projects-section .project-text hr{border-color:#64a19d;border-width:.25rem;width:30%}}.signup-section{padding:10rem 0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(22,22,22,.1)),color-stop(75%,rgba(22,22,22,.5)),to(#161616)),url(../img/bg-signup.jpg);background:linear-gradient(to bottom,rgba(22,22,22,.1) 0,rgba(22,22,22,.5) 75%,#161616 100%),url(../img/bg-signup.jpg);background-position:center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover}.signup-section .form-inline input{-webkit-box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;padding:1.25rem 2rem;height:auto;font-family:'Varela Round';font-size:80%;text-transform:uppercase;letter-spacing:.15rem;border:0}.contact-section{padding:5rem 0 0}.contact-section .card{border:0;border-bottom:.25rem solid #64a19d}.contact-section .card h4{font-size:.8rem;font-family:'Varela Round';text-transform:uppercase;letter-spacing:.15rem}.contact-section .card hr{border-color:#64a19d;border-width:.25rem;width:3rem}.contact-section .social{margin-top:5rem}.contact-section .social a{text-align:center;height:3rem;width:3rem;background:rgba(255,255,255,.1);border-radius:100%;line-height:3rem;color:rgba(255,255,255,.3)}.contact-section .social a:hover{color:rgba(255,255,255,.5)}.contact-section .social a:active{color:#fff}body{font-family:Nunito;letter-spacing:.0625em}a{color:#64a19d}a:focus,a:hover{text-decoration:none;color:#3c6360}.bg-black{background-color:#161616!important}.bg-primary{background-color:#64a19d!important}.text-primary{color:#64a19d!important}footer{padding:5rem 0}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Grayscale - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">iSalon</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Features</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#signup">Devs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">iSalon</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5"><i>"Style on the go, wherever you go."</i></h2>
<!-- for admin only <h2 class="text-white-50 mx-auto mt-2 mb-5"><b>(Admin Mode)</b></h2> -->
Learn About iSalon
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">About iSalon</h2>
<p class="text-white-50">Getting our haircuts or nails polished or even having a massage </p>
</div>
</div>
<img src="img/ipad.png" class="img-fluid" alt="">
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section bg-light">
<div class="container">
<!-- Featured Project Row -->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="img/bg-masthead.jpg" alt="">
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Shoreline</h4>
<p class="text-black-50 mb-0">Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website!</p>
</div>
</div>
</div>
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-01.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Misty</h4>
<p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-02.jpg" alt="">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Mountains</h4>
<p class="mb-0 text-white-50">Another example of a project with its respective description. These sections work well responsively as well, try this theme on a small screen!</p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section -->
<section id="signup" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
<h2 class="text-white mb-5">Interested to join in?</h2>
<form class="form-inline d-flex">
<button type="submit" class="btn btn-primary mx-auto">Sign up now!</button>
</form>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section bg-black">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Address</h4>
<hr class="my-4">
<div class="small text-black-50">4923 Market Street, Orlando FL</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4>
<hr class="my-4">
<div class="small text-black-50">
hello#yourdomain.com
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-mobile-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Phone</h4>
<hr class="my-4">
<div class="small text-black-50">+1 (555) 902-8832</div>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
Copyright © Your Website 2018
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</body>
</html>
I am new at bootstrap and I got a template from the web. It is inside a folder and the file is in html. I have made another separate file of folder that contains a simple php login form. When i turned in for my xampp and went to localhost. so when I opened my downloaded template (via dragging the html file). It looked like this
I have modified the background picture. And tried to connect my login (login button directs to login form) form with this and opening it via xampp but this pops up.
Did I miss something in my css? I have checkede and it was all the same. Please someone help