I've tried all youtube videos, followed all the documentation of bootstrap. Please help me. I can't understand why it's not even working :(
Here's the basic HTML bootstrap code.
!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="scan-landing.component.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#500&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="main">
<div class="scanner-shell" [hidden]="!hasDevices">
<select #selectedValue (change)="onDeviceSelectChange()">
<option [value]=" " [selected]="!currentDevice">No Device Selected</option>
<option *ngFor="let device of availableDevices" [value]="device.deviceId"
[selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{device.label}}</option>
</select>
<zxing-scanner class="scanner-window" [(device)]="currentDevice" (scanSuccess)="onCodeResult($event)"
[formats]="formatsEnabled" (permissionResponse)="onHasPermission($event)"
(camerasFound)="onCamerasFound($event)"></zxing-scanner>
<!-- <section class="results" *ngIf="qrResultString">
<div>
<small>Result</small>
<strong>{{ qrResultString }}</strong>
</div>
<button (click)="clearResult()">×</button>
</section> -->
</div>
</div>
-->
It's so hard to troubleshoot since nothing shows in my console whenever I press it.
Your included bootstrap files were broken !
You should not split <link> or <script> into two lines.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="scan-landing.component.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#500&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="main">
<div class="scanner-shell" [hidden]="!hasDevices">
<select #selectedValue (change)="onDeviceSelectChange()">
<option [value]=" " [selected]="!currentDevice">No Device Selected</option>
<option *ngFor="let device of availableDevices" [value]="device.deviceId"
[selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{device.label}}</option>
</select>
<zxing-scanner class="scanner-window" [(device)]="currentDevice" (scanSuccess)="onCodeResult($event)"
[formats]="formatsEnabled" (permissionResponse)="onHasPermission($event)"
(camerasFound)="onCamerasFound($event)"></zxing-scanner>
<!-- <section class="results" *ngIf="qrResultString">
<div>
<small>Result</small>
<strong>{{ qrResultString }}</strong>
</div>
<button (click)="clearResult()">×</button>
</section> -->
</div>
</div>
Related
Why is there a space between dropdown-toggle button and dropdown-menu?How can I remove this space? The box-shadow hides the space, but when the box-shadow is removed, you can see the space easily. This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.btn, button {
box-shadow: none !important;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Edit: edited the css code to make the space visible easily
To eliminate the gap between the toggle element and the dropdown, apply this CSS. It's a rare case where using !important seems appropriate, since the original styles are applied inline by the Bootstrap script.
Optionally apply some border-radius overrides to visually combine the elements when open.
.dropdown-menu {
transform: translate3d(0px, 38px, 0px) !important;
}
/* optional */
body .dropdown-toggle.show {
border-radius: .25rem .25rem 0 0;
}
body .dropdown-menu {
border-radius: 0 .25rem .25rem .25rem;
}
/* end optional */
.btn,
button {
box-shadow: none !important;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a> </li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.dropdown-menu.show {
transform: translate(0px, 40px);
}
This is what pushes the menu down when you click the toggle
Recently, I have started web developing and I am using bootstrap v5.0 to build a website. Following is the code of a file named "grage.php", and its code is stated below,
<!-- HERE SHOULD BE THE CODE OF GARAGE -->
<div class="container-fluid">
<div class="row">
<!-- CODE FOR OPTIONS-->
<div class="col-3" style="align-items: center;">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<!-- CODE FOR DISPLAYING MODEL -->
<div class="col-7">
<div style="align-items: center;">
<model-viewer src="car_models/compressed_civic.glb" alt="A 3D model of an astronaut" ar ar-modes="webxr scene-viewer quick-look" environment-image="neutral" auto-rotate camera-controls>
</model-viewer>
</div>
</div>
<!-- CODE FOR DISPLAYING CHOOSED OPTION'S AND ETC-->
<div class="col-2">
<p>Here should be the code for option's</p>
</div>
</div>
</div>
<!-- ADDING FOOTER -->
<?php
include "headerAndFooter/footer.php";
?>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js"></script> -->
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
I am having problem as the dropdown function is not working as shown below, Dropdown Image
Note: I have added the bootstrap css CDN link in the header.
Please let me know, how to resolve this problem.
I am using bootstrap v5.0
But you've loaded bootstrap 4. That's why it's not working. Bootstrap 4 uses data-toggle="dropdown" and bootstrap 5 uses data-bs-toggle="dropdown". You need to load the right JavaScript/CSS for it to work.
Bootstrap 4 Example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
Bootstrap 5 Example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
You need to make sure you're using the Bootstrap 5 CDN that includes Popper:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"crossorigin="anonymous"></script>
From the bootstrap 5 installation guide: https://getbootstrap.com/
Also is important don´t include more than one script like
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
Because not working. Only needs ones like says Nick
I used bootstrap 5 drop-down toggler with reference to 1st comment with snippet.
I faced problem during to close menu after onclick why is this so and it is working perfectly in your case
I have written :-
.container-fluid{padding 3% 15%;}
but its only changing padding of Vertical directions to 3% and no change in horizontal padding
#title {
background-color: #ff4c68;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap" rel="stylesheet">
<!-- CSS files -->
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- js file -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand ms-2" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<blockquote class="imgur-embed-pub" lang="en" data-id="a/hlTZeUb" data-context="false" ></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>"
</div>
</div>
</div>
</section>
</body>
</html>
I want to add horizontal padding to 15% to container-fluid class div element so that they come to center of screen.
EDIT :- It looks like bootstrap has also mentioned some padding for .container-fluid in their css so when i disable it using Dev Tools in my browser i get my required padding of 15% horizontally. But is there any way to really solve it?
Try this:
.container-fluid {
padding: 3% 15% !important;
}
This question is actually reproducible. It happened to me when I was following the Tindog tutorial. The other answer works well but there's a better way of doing this. See here.
You can add an id or class to the <body> tag:
<body id="bootstrap-overrides">
and then use that with every element you want to style in the CSS file like this:
#bootstrap-overrides .container-fluid {
padding: 3% 15%;
}
It works with all the elements.
I have a dropdown menu with contains a data toggle for tabs. I have the problem that once I selected an item, the item stays selected and stays blue.
Any ways to fix this?
Code:
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
Make a id="dropdown-menu" next to class="dropdown-menu". This would be more convenient. reference line -20.
Make a Javascript that will add .active class in your clicked area/HTML. For example if you click on
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
that will add .active class in there
<button class="dropdown-item class" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
And it will remove .active class from the previous position. This .active class is a Bootstrap class. It will render CSS style from Bootstrap.
Code below-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div id="dropdown-menu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
<script>
var header = document.getElementById("dropdown-menu");
var btns = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
document.getElementById("overall").innerHTML = this.innerText;
});
}
</script>
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I've got a head tag with a bunch of css stuff and my body tag consists of a navbar and a simple header. However, around the header's row, I have a well but neither the well nor it's border shows. I need help fixing the well to display around the "Jesus is Lord" so it looks nice and clean. I also want the well to be at 0.8 opacity. Here is the page (live at theredstonetaco.com):
<html>
<head>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<!-- bootstrap css, jQuery, popper, bootstrap js-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style>
well {
border: solid 5px green;
}
</style>
<!-- title -->
<title>Homepage</title>
<!--
background
and
navbar
-->
<!-- full-page cross image -->
<div style="position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;">
<img style="width:100%;height:100%;" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Christian_cross.svg" alt="full-page cross" />
</div>
<!-- outer navbar, dark, dark, fixed position -->
<nav class="navbar navbar-light bg-light navbar-fixed-top">
<!-- fluid container -->
<div class="container-fluid">
<!-- row for dropdowns -->
<div style="flex-grow:1;" class="row">
<!-- left dropdown (taccount) -->
<div style="flex-grow:1;"class="col col-xs-4">
<ul class="navbar navbar-nav">
<li class="nav-item dropdown">
<a class="navlink dropdown-toggle" href="#" id="navbarDropdownMenuLinkLeft" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
taccount
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkLeft">
<a class="dropdown-item" href="login.php">login</a>
<a class="dropdown-item" href="register.php">register</a>
<a class="dropdown-item" href="#">profile</a>
<a class="dropdown-item" href="#">settings</a>
</div>
</li>
</ul>
</div>
<!-- middle homepage button (tacopage) -->
<div style="flex-grow:1;" class="col col-xs-4">
<ul class="navbar navbar-nav">
<li>
tacopage
</li>
</ul>
</div>
<!-- right dropdown (tactions) -->
<div style="flex-grow:1;" class="col col-xs-4">
<ul class="navbar navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="navlink dropdown-toggle" href="#" id="navbarDropdownMenuLinkRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
tactions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkRight">
<a class="dropdown-item" href="Christmas.php">Christmas</a>
<a class="dropdown-item" href="dad.php">dad</a>
<a class="dropdown-item" href="https://youtube.com/theredstonetaco">youtube</a>
<a class="dropdown-item" href="dating.php">dating</a>
<a class="dropdown-item" href="#">about</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- embed addons to layout -->
<div class="well">
<div class="row">
<div class="col"></div>
<div class="col text-center" style="opacity: 0.8; color: #000A8C;">
<h1>Jesus is Lord</h1>
</div>
<div class="col"></div>
</div>
</div>
A class selector requires a . in front of it.
So the correct style would be;
.well { border: 5px solid green; }
For completeness; here you can find all css selectors and how to use them.