I've been working on finding a solution to this, and cannot seem to find anything that works. I am trying to make some general components for a system using Bootstrap 5, and have defined a button as:
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
When users place this in their container in the system, it automatically generates an outer container:
<div class="divContainer">
//button
</div>
So, if the users try to place 2 buttons, the code will look like:
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
How do I inline these buttons and also be able to change the alignment on them? It is not possible for me to add classes to the outer container of the divContainers.
I hope someone can shed some light on this problem for me. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Example</title>
</head>
<body>
<!-- Example Code -->
<div class="d-flex">
<button type="button" class="btn btn-primary d-block">Foo Bar</button>
<button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
</div>
<!-- End Example Code -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<div class="d-flex">
<button type="button" class="btn btn-primary d-block">Foo Bar</button>
<button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
</div>
use Bootstrap 5 class d-inline to align them Docs here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer d-inline">
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer d-inline">
<div class="col buttonDiv d-inline">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
Related
I am designing a responsive form. My form has 1 label, 1 input field, and 5 buttons.
Both my buttons and the input field are under col-8.
I want my buttons to be placed in such a way that:
It should start placement below and at the beginning of the input field.
(imagine 2 rows under a col-8)
Space between 2 buttons are equal.
On small screen, buttons will be shown as stack.
Here are screenshots about what I want:
For normal screens
When small screens - it should be stacked
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
<div class="offset-4 form-group row">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</form>
</div>
</body>
</html>
I have tried 3 times to place the 5 buttons.
first - only row and justify-content-between
then - row and col
finally - row, col and justify-content-between
But each of them either crosses the input field width (1st screenshot) or keeps gap from input field width (2nd screenshot).
How can I properly make the 5 buttons that satisfy both justify-content-between and stack [ col inside row ] properly?
A request: I would like to have a suggestion - that doesn't excessively involved using margin and padding, since this should be good in all screen size.
Your markup has a few problems. To avoid these in the future, read each dot (bullet point) under How it works section of the Bootstrap grid section.
Here's a breakdown of what was wrong:
not all .rows were direct children of .container or .col. Because .row has negative margins, it needs a parent having horizontal "gutter" paddings to compensate the negative margins (or you could disable the gutter by applying mx-0 or no-gutters classes).
you applied .offset-4 on .row, which is designed for .cols. This is important, because by applying it to the .row you misalign all columns in that row.
to make use of .justify-content-between you don't necessarily need another level of .row + .cols. All you need is display: flex on the element, which can be applied with d-flex class.
As an alternative solution, I've changed last .row example to use a .btn-group, which is a slightly better UI solution for this type of action-bar layout. The custom CSS is mainly for switching it to vertical on mobile (which could also be achieve by applying .btn-group-vertical to it, but it doesn't sport responsive variants).
See it working:
.custom-btn-group {
width: 100%;
}
#media(max-width: 767px) {
.custom-btn-group,
.vertical-mobile {
flex-direction: column;
}
.custom-btn-group:not(#_) .btn {
margin-left: 0;
}
.custom-btn-group:not(#_) .btn:first-child {
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
}
.custom-btn-group:not(#_) .btn:last-child {
border-bottom-left-radius: .25rem;
border-top-right-radius: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<form class="bg-dark col-sm-6 py-3">
<div class="form-group row">
<label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
<div class="col-sm-9 col-md-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between vertical-mobile">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="btn-group custom-btn-group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="offset-4 col-8">
<div class="row justify-content-between" style="margin: 0%; padding: 0%;">
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">A</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-success">B</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-warning">C</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-danger">D</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">E</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I want to mention some things that worked for me:
I had to make the margin: 0% and padding: 0% each time for col-auto, if I do not, then there is a gap created like in my screenshot.
I had to put each button in col-auto then each col-auto in row. Finally, I made the row justify-content-between, and of course, margin: 0% and padding: 0% for removing unnecessary gaps.
Finally I wrapped the whole thing under offset-4 col-8 which was wrapped under row.
I have this .card-footer:
<div class="card-footer">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
The buttons .toleft and .toright are in the correct position, however the button #more should be exactly on the center of the footer, but it is still on the left.
Any ideas?
Bootstrap 3
You can use the following solution adding .text-center to the .card-footer container:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
Bootstrap 4.0+
On Bootstrap 4.0+ there is no class .pull-left or .pull-right anymore. You have to use .float-left and .float-right instead. You can also use .text-center to center the second button.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-footer text-center">
<button class="btn btn-dark float-left" type="button" id="toleft"><</button>
<button class="btn btn-dark" type="button" id="more">+</button>
<button class="btn btn-dark float-right" type="button" id="toright">></button>
</div>
Note: I don't recommend to use custom CSS rules. Bootstrap is a CSS Framework to provide solutions for many design problems. Overwriting CSS properties on components can cause problems.
If you're seeing this in 2018 or beyond, please note that some of these old answers will not work with Bootstrap 4...
However, there is no need to include additional CSS as a couple of the previous answers suggest.
The pull-left and pull-right classes no longer work in Bootstrap 4.
Instead, we now use float-left and float-right to float our left and right buttons.
The easiest way to achieve the desired effect would be to start by centering the footer contents by adding the text-center class to the footer.
Next, we can float the left button with the float-left class and float the right button with the float-right class.
Here's the final HTML:
<div class="card-footer text-center">
<button class="btn btn-theme float-left" type="button" id="toleft">left</button>
<button class="btn btn-theme" type="button" id="more">center</button>
<button class="btn btn-theme float-right" type="button" id="toright">right</button>
</div>
Which gives us the following result:
Just tried this with the latest alpha6 build of Bootstrap 4 (I'm assuming you're using BS4 as you mentioned the card component), and it looks as though the default behaviour is to align buttons in card footers to the middle anyway.
Note that I also had to introduce the .pull-left / .pull-right utility classes, as these no longer appear to be defined in the Bootstrap CSS.
See demo below:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer text-muted">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button> </div>
</div>
Try This :
.card-footer{
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card-footer">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
Supose I had this code im one of my views of my spring project:
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
(without the subtext). How I could place a group of buttons like this one:
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
inside the page-header, aligned to the right?
Well make them float right by using bootstrap's pull-right class:
.header-btn-group{
top: 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="page-header">
<div class="btn-group pull-right header-btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<h1>Example page header <small>Subtext for header</small></h1>
</div>
In the following example you can see that the buttons are barely indistinguishable from eachother and would therefor want to use some spacing between the buttons like btn-toolbar does. I cant use that however since the buttons will be very small and don't fill the entire div
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
I want the spacing to be like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-toolbar" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
Here is one more solution. Since btn-group rounds only far left and right edges of group, you'd rather remove .btn-group from <div class=" btn-group btn-group-justified" role="group">, and then set paddings to inner divs of class .btn-group
As you wish you can define higher specificity for this .btn-group to prevent a spread of style outside.
.btn-group {
padding-left: 2px;
padding-right: 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
You can use bootstrap grid system.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class=" btn-group btn-group-justified" role="group">
<div class=" col-xs-5">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
<div class=" col-xs-5">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
</div>
</div>
Are you looking for something like below?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-primary btn-lg btn-block">Yes</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-lg btn-block">No</button>
</div>
</div>
Hope this helps.
I am making a site for my high school robotics team and I am new to HTML and CSS (bootstrap). I do not want the space between my banner and my navbar in my site. How do I eliminate that space?
www.robotichive3774.com
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team 3774 Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Abanoub Boules</h2>
<p>Team Captain, Engineer, Coder, Mastur-bater</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andre Bernardo</h2>
<p>Head Engineer, Assistant Captain</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Leo Scarano</h2>
<p>Head Coder, Head Web-master</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kristen Kaldas</h2>
<p>Coder, Head Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Anish Patel</h2>
<p>Engineer, Head 3D Modelling</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andrew Wojtkowski</h2>
<p>Coder, Web-master, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Furhan Ashraf</h2>
<p>Financial Advisor, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kenneth Rebbecke</h2>
<p>Engineer, Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Melanie Aguilar</h2>
<p>Secretary, Mascot</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
</div>
</div>
</body>
</html>
Just set the margin-bottom to zero for the element:
#top-jumbotron { margin-bottom: 0; }
Example here: http://www.bootply.com/xQvinJhNLN
You could use CSS as shown above. Or, you could use the classes that come with Bootstrap:
<jumbotron class="mb-0">
<!-- Anything you are putting in the jumbotron -->
</jumbotron>
These classes can be used with various Bootstrap components. Here is a link: https://getbootstrap.com/docs/4.0/utilities/spacing/