htmlcsstwitter-bootstrapgrid-layout
Bootstrap Grid Container Keeps Readjusting
I am trying to make a website. I have managed to make quite a large portion of it without much hassle. However, currently I want to alter my design a little but the Bootstrap Grid isn't functioning the way it should be. I basically have a Carousel, then a Container, then one row which contains tree columns.
Initially, there was a horizontal navbar before the Carousel. I removed it because I have now decided to have a button on the left side of the page(in the empty space). The user will click on the button and a navbar(vertical) will swipe in from the left. Clicking that button again will close it again. My problem is whenever I insert the code for this navbar in the container, it messes up my primary columns. If I add it as a columns, the remaining three columns readjust themselves and the last one goes below. If I add the code in the row inside the container or anywhere outside it, it leaves extra white space between the Carousel and the container. Plus I want both the button and the navbar to be scrollable. They are supposed to scroll along with the mouse wheel or as the user scrolls down the page and back up again. Even if something as small as a Bootstrap button is added, it messes up the whole thing.
I Want to preserve the white space on the right hand side so that I can add components there later on if necessary. I've tried what I could have and haven't bee able to fix the issue yet. So I'd really appreciate if someone can identify the problem and help fix it.
Thanks.
Picture 1 is similar to what I plan. Picture 2 is what happens when I add buttons. The three buttons are outside of the container. They are creating extra space between the Carousel and the container. The one button inside the container messes up the columns.
EDIT: I have shortened the code and added the snippet here. It will only work properly on a browser width of 1200px and above.
@media only screen and (min-width: 1200px){
.body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.logo_image {
height: 200px;
width: 100px;
}
/* .nav-brand allows the logo properties to be changed */
.navbar-brand {
}
.navbar{
background-color: teal;
}
.collapse{
background-color: #151515;
}
.navbar-collapse{
border-style: solid;
border-color: fuchsia;
}
.mr-auto{
background-color: #151515;
}
.navbar-nav{
background-color: #151515;
}
.navbarSupportedContent{
background-color: #151515;
}
.btn{
background-color: whitesmoke;
}
.body{
background-color: black;
}
.carousel-inner{
height: 650px;
}
.carousel-item active{
height: 90px;
}
.item active{
height: 50px;
}
#myRow1{
background-color:;
height:auto;
width: auto;
}
#whoarewe{
text-align: center;
height: auto;
font-family: 'Exo', sans-serif;
font-weight: 900;
font-size: 18px;
color: #f9f9f9;
margin-left: auto;
margin-right: auto;
background-color: #062c4b;
}
#ourtournaments{
text-align: center;
height: auto;
font-family: 'Exo', sans-serif;
font-weight: 900;
font-size: 18px;
color: #f9f9f9;
}
#footer{
background-color:;
height:auto;
color: #f9f9f9;
}
#partnerships{
text-align: center;
height: auto;
font-family: 'Exo', sans-serif;
font-weight: 900;
font-size: 18px;
color: #f9f9f9;
background-color: #062c4b;
}
#disclaimer{
width: 300px;
text-align: left;
font-size: 11px;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#socialMedia{
margin-left: auto;
margin-right: auto;
text-align: right;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
#mainContainer{
background-color: #151515;
}
#mainContainer2{
background-color: #151515;
}
.material-icons.md-18 {
font-size: 18px;
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-36 {
font-size: 36px;
}
.material-icons.md-48 {
font-size: 48px;
}
.material-icons.md-72 {
font-size: 72px;
}
.material-icons.md-108 {
font-size: 108px;
}
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<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://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>
<!-- Custom CSS -->
<link rel = "stylesheet" href="custom.css">
<!-- Google Material Design And Google Fonts CDN -->
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed" rel="stylesheet">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<title>AlphaGamigLeague</title>
</head>
<body>
<!-- End Of Navigation Bar -->
<!-- Beginning Of Carousel -->
<!-- New Carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src= "https://drive.google.com/uc?export=view&id=1aQjbXQ_zxZRUASYuh9IQ2p1fA8V-LBmx" height="650px" width="400px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>bababa</h5>
<p>aabababab</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src= "https://drive.google.com/uc?export=view&id=1aQjbXQ_zxZRUASYuh9IQ2p1fA8V-LBmx" height="650px" alt="Second slide" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>o06nb53o6mb39p56yhmb356</h5>
<p>aabababab</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src= "https://drive.google.com/uc?export=view&id=1aQjbXQ_zxZRUASYuh9IQ2p1fA8V-LBmx" height="650px" alt="Third slide" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>bababa</h5>
<p>aabababab</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END -->
<!-- Beginning Of Container -->
<br>
<br>
<!-- Beginning Of Main Content -->
<!-- Bootstrap Container Begins Here -->
<div id ="mainContainer" class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md-4">
<br>
<h3>
Who Are We?
</h3>
<br>
<img class = "img-fluid" id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1DDkg4JFU0zAc8QIklyad-Es1mC1OvFfw">
<br>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "ourtournaments" class="col-md-4">
<br>
<h3>
Tournaments
</h3>
<br>
<img class = "img-fluid" id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H">
<br>
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held. include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "partnerships" class="col-md-4">
<br>
<h3>
Partnerships
</h3>
<br>
<img class = "img-fluid" id = "mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q" >
<br>
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us.
</p>
<br>
<br>
<br>
<i class="material-icons md-108">
contact_support
</i>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
<!-- Footer Begins Here -->
<!-- Second Row Begins Here -->
<div id = "footer" class="row">
<!-- First Column Begins Here -->
<div id = "myRow2Column1" class="col-md-6">
<!-- Disclaimer DIV Begins Here -->
<div id = "disclaimer">
<p>
<br>
All rights reserved. No part of this website must be copied and/or reproduced without prioir written permission from the owner.
<br>
<br>
The Alpha Gaming League, AGL eSports, AGL Fantasy League, PCON Games and all other visible logos are registered trademarks of their respective owners.
</p>
</div>
<!-- Disclaimer DIV Ends Here -->
</div>
<!-- First Column Ends Here -->
<!-- Second Columns Begins Here -->
<div id = "socialMedia" class="col-md-6">
<br>
<!-- Facebook Icon DIV Begins Here -->
<i class="fab fa-facebook-square fa-5x" style="color: dodgerblue" href = "https://www.facebook.com/aglesports">
</i>
<!-- Facebook Icon DIV Ends Here -->
<!-- Twitter Icon DIV Begins Here -->
<i class="fab fa-twitter-square fa-5x" style="color: dodgerblue">
</i>
<!-- Instagram Icon DIV Begins Here -->
<i class="fab fa-instagram fa-5x" style="color: dodgerblue">
</i>
<!-- Instagram Icon DIV Ends Here -->
<!-- Twitter Icon DIV Ends Here -->
</div>
<!-- Second Column Ends Here -->
</div>
<!-- Second Row Ends Here -->
</div>
<!-- Bootstrap Container Ends Here -->
</body>
</html>Solution
How about this ... Add this to your CSS
h3 {
margin: 1rem 0;
}
#myRow1 {
position: relative;
background-color: black;
}
#arrow {
position: absolute;
left: -10rem;
top: 50%;
width: 5rem;
height: 5rem;
}
Then add this to your HTML, inside <div id="myRow1" class="row">...</div>
<div id="arrow">
<svg viewBox="0 0 32 32">
<path d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16c8.8,0,16-7.2,16-16S24.8,0,16,0z M25.1,17.1l-6,6c-0.3,0.3-0.7,0.4-1.1,0.4
c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l3.4-3.4H8c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h12.4l-3.4-3.4
c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l6,6C25.6,15.5,25.6,16.5,25.1,17.1z"/>
</svg>
</div>