What's inside the navigation bar, icons, and content cards? (Using HTML and Bootstrap)

Having a few issues that need resolving:

  1. Unable to display the contents of my navbar after the navbar-brand section. Looking to add a home button, about section with a drop-down menu including: 'Our mission', 'our team', 'faq;', a contact button, etc. (refer to the picture for a visual)
  2. The icon in my card footers is not visible.
  3. How can I make the gray part of the cards have a transparent gray color that shows the body background?

CSS:

#header {
        background-color: transparent;
        background-position: center bottom;
    }

    h1 {
        color: white;
        text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                    0px 8px 13px rgba(0, 0, 0, 0.1),
                    0px 18px 23px rgba(0, 0, 0, 0.2);
        font-family: 'Source Sans Pro', sans-serif;
    }

    .navbar-brand {
        color: white;
        text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                    0px 8px 13px rgba(0, 0, 0, 0.1),
                    0px 18px 23px rgba(0, 0, 0, 0.2);
        font-family: 'Source Sans Pro', sans-serif;
    }

    .navbar.bg-dark.navbar-dark {
        background-color: transparent !important;
    }

    body {
        background-image: url('https://images.unsplash.com/photo-1588774210246-a1dc467758df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80');
    }

    .card-body {
        font-family: 'Source Sans Pro';
    }

    .lead {
        color: white;
        text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                    0px 8px 13px rgba(0, 0, 0, 0.1),
                    0px 18px 23px rgba(0, 0, 0, 0.2);
        font-family: 'Source Sans Pro', sans-serif;
    }

    .card-body {
        background-color: rgba(128, 128, 128, 0.5);
    }

    .card-title {
        color: white;
        font-family: 'Source Sans Pro', sans-serif;
    }

    .card-text {
        color: white;
        font-family: 'Source Sans Pro', sans-serif;
    }
htmlcssbootstrap-4

Answer №1

  1. I successfully resolved the navigation problem, but you might consider changing the style of the navigation items to enhance the user experience.
  2. Furthermore, I rectified the issue with the icon display by implementing Font Awesome 4 style. To achieve this, utilize fa fa-heart-o https://i.sstatic.net/HCUic.pnghttps://i.sstatic.net/HfHwX.png
  3. As a final touch, I incorporated CSS code to ensure that the background of the card body is 80% transparent. The background-color for class .card should be set as transparent and the background-color for class card-footer should be white.
.card {
  background-color: transparent !important; 
}
.card-body {
    background-color: gray; 
    opacity: 80%;
}
.card-footer {
  background-color: #fff !important;
}


#header {
    background-color: transparent;
    background-position: center bottom;
}
...
...

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
...
...

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

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

c#asp.nethtmlvisual-studio-2010calendarextender

Trouble with FilterBy Feature in Bootstrap-Table

I am attempting to use filtering functionality with a table that is populated via JSON, utilizing bootstrap-table by wenzhixin. HTML snippet: <button class="btn btn-primary" id="filterBtn">Filter</button> <div class="container"> &l ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-table

Unexpected data being passed in knockout click event binding

for (let i = 0; i < 9; i++) { vm.icdCodes.push({Index:i, ID:'',DiagnosisCd: '' ,Description:ko.observable('')}); } <tbody data-bind='foreach: $root.icdCodes'> <tr> <td> ...

htmlknockout.jsko.observablearray

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...

javascripthtmlangularjs

Ways to apply attributes to specific images using a JQuery array

I'm struggling to add attributes to multiple images using a jQuery array. Can anyone provide some assistance? <div id="result"> <img src="Image1" width="300"/> <img src="Image2" width="300"/> <img src="Image3" width="300"/> ...

jqueryhtml

Strange gray gradient background suddenly showing up on mobile devices

Encountering an issue with a login form displayed on a sliding modal. The design looks correct on desktop and even in responsive mode with dev tools, but when accessed through mobile Chrome or Safari on an iPhone, an unusual gray rounded box or shadow appe ...

cssreactjstailwind-css

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

I experimented with using jQuery on a webpage that has already been modified by jQuery in order to add custom CSS code: jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>'); When I ...

javajavascriptcssselenium-webdriver

Arranging block-level elements in a horizontal format

In the book "CSS The definitive Guide", it is mentioned that "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". However, in the case provi ...

htmlcss

How can I switch between columns in a dual-column layout?

In my latest project, I utilized CSS Flexbox to create a sophisticated two-column layout that allows toggling each column independently. While this functionality is exactly what I need, I can't help but feel that my current method is somewhat cumberso ...

jqueryhtmlcssflexbox

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

Setting the height of a box-inner div to full height in Bootstrap 4: A guide

Assistance Needed: I have encountered an issue with my design while using bootstrap-4. The box-inner div works perfectly on desktop, adjusting its height according to the content entered. However, on a real iPad, the columns are not of equal height as sho ...

htmlcssbootstrap-4

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: https://i.sstatic.net/3ruNL.png This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type ...

javascripthtmlajax

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

[QUESTION] Is there a way to make the Menu List disappear when zooming in on a webpage? For example: <-- Normal Page [No Zoom] --> [Logo] Profile Gallery Guestbook <-- Zoom In 120% --> [Logo] Profile Guestbook <-- Zoom In 150% --> ...

javascriptjqueryhtmlcssajax

Is it possible to include ternary in the "homepage" section of the package.json file?

When making API calls in production, they will be on the same domain as where my app is hosted, so it's necessary to include "homepage": "." in the package.json. However, when working locally from localhost, I need to make API calls to the production ...

javascripthtmlnode.jspackage.json

Managing Margins and Padding in Multiple Lines of Divs in CSS

Trying to understand the spacing issues that arise when tiling a series of divs within a parent div. Here is a link to the fiddle for reference: http://jsfiddle.net/SNSvU/4/. Below is the code snippet: <div id="prioritiesWrapper"> <div class="p ...

cssalignment

A collection of items displayed in an unordered format across two columns

I need help creating a list that displays in two columns. One column for odd numbers, the other for even numbers. Here's an example of what I'm trying to achieve: +----------------------------------------------------+ | col- ...

htmlcsstwitter-bootstrapcol

Uneven column widths in Bootstrap 4 tables

I'm updating a project to Bootstrap 4. Previously in Bootstrap 3, all three columns were the same width. However, in Bootstrap 4, the first column is wider while the other two columns are squished together on the far right side. Here is how it looked ...

htmllayouthtml-tablebootstrap-4

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: https://i.sstatic.net/J4DPp.jpg I'm attempting to achieve this look using CSS: https://i.sstatic.net/fuucK.png I've experimented with skewing but the red area persists, regardless of t ...

htmlcsstransform

Button click not triggering Ajax functionality

I've been working on implementing a simple Ajax function in a JSP using JQueryUI. The goal is to pass two text fields from a form and use them to populate two separate divs. However, when I click the button, nothing seems to be happening. I even tried ...

jqueryhtmlajaxjsp