Effectively utilizing Bootstrap results in well-designed elements with hidden borders

I have a head tag filled with CSS styles and my body tag contains a navbar and a basic header. However, the well surrounding the header's row is not displaying, along with its border. I need assistance in fixing the well so that it properly surrounds the text "Jesus is Lord" for a clean appearance. Additionally, I would like the well to have an opacity of 0.8. The live page can be viewed 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>
            <a href="homepage.php">tacopage</a>
            </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>

Answer №1

It is important to note that a class selector requires a period (.) before the class name. Therefore, the correct style would be:

.well { border: 5px solid green; }

To ensure comprehensive understanding, you can explore all CSS selectors and their usage here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Formatting dates for the bootstrap datepicker

Hi there! I am currently using a bootstrap datepicker and I am attempting to retrieve the value from the datepicker text box in the format of date-month-year for my controller. However, at the moment, I am only able to obtain values in the format Tue Oct 0 ...

Ways to retrieve the clicked item's index in a jQuery collection without using the index() method

Is there a way to obtain the index of clicked elements easily? var $inputs = $("input"); $inputs.click(function() { console.log($(this).index()) }); This method correctly works for the structure below: div>(input+input+input) However, I am encoun ...

It is not possible to alter the styles of the ng-daterangepicker Angular plugin

After installing the angular2 plugin "ng-daterangepicker", I attempted to resize a div within it by modifying the .sass file. However, despite clearing the cache, the changes did not reflect in my browser. It seems that I may need to make adjustments to .s ...

Style the CSS exclusively to the expanded menu section

I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code: @media (min-width: 980px) { /* your conditional CSS*/ } However, the issue arises when my browser win ...

The jQuery html function may encounter issues when used in Chrome browser

Can someone help me figure out why this code isn't functioning properly in Chrome, even though it works fine in Safari? I've been searching for a solution but haven't had any luck! jQuery.noConflict(); jQuery(document).ready(function() { ...

Loading of local resources is restricted in the Apache web server

I am encountering an issue with my Apache web server on a Raspberry Pi. I need to display graphs using the MPLD3 libraries, which are loaded from the server's folder. When I run my index.php page, I receive a Not allowed to load local resources error ...

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

Tips for aligning text at the bottom of a div that has been floated to the right alongside another div

I have a parent container with two child divs inside; one div is floated to the left and the other is floated to the right. Here is my current layout: ┌─────────────┬─────────────┐ │ Text left ...

Personalized CSS designs within the <option> element in an expanded <select> menu

Are there alternative methods for customizing an expanded select list using HTML or a jQuery plugin? I am interested in rendering each option in the list with multiple styles, similar to this example where the number is displayed in red: <select size=" ...

The Navbar design in Bootstrap is not scaling properly with the background image, making

I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges. Here is the design I am working from: https://i.sstatic.net/MsFzq.jpg Here is my current progress: https://i.sstatic.ne ...

Issue with implementing autocomplete using AJAX and PHP for multiple input fields

HTML code: <table> <tr> <td align="center"> <label for="InputBox1"><b>~</b><font color="red">*</font>: &nbsp;</label> </td> </tr> <tr> <td align="center"> <div id="1"> ...

Error 404 occurs when images are not able to load when stored in a different directory

When I encounter a custom 404 Error on my website at http://ericmuir.tk and it happens in a directory other than the home one, none of the images on the page load. I faced a similar issue with loading CSS scripts, but resolved it by using style tags which ...

Remove the excess white space surrounding the header background image on the website above the fold

How do I eliminate the white spaces on the left, right, and top of my background image that covers the header area above the fold on my webpage? I am currently testing in Google Chrome and using VS Code as my editor. html, body { width: 100%; height: ...

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

What is the process for closing the lightbox?

My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...

Is there a way to organize an array of elements into three columns using PHP?

My array of menu items is being displayed on the screen in 3 columns, but I want them to appear differently without altering the HTML structure. Currently, they are listed like this: 1 2 3 4 5 6 7 8 9 I would like them to display as follows: 1 4 7 ...

Issue with enqueuing Bootstrap js in WordPress

Why isn't my bootstrap.min.js file being included in the queue, while my bootstrap.min.css file is? Take a look at my code below: <?php // Load custom jQuery function load_custom_jquery() { wp_deregister_script('jquery'); ...

Displaying a popup containing a div when clicking on a link

I need assistance with creating a link that will display a div in a popup window. Here is the link I am working with: <li><a class="newAttachmentType" onclick="getFiles(true)">Move to somewhere</a></li> Also, here is the div that ...

Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly? Here is an example of what I current ...

What is the best way to center all items in a vertical list of text?

Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties lik ...