I'm having trouble changing the background color on my HTML Bootstrap website. Is there a way to easily add social network buttons as well?

I'm encountering a problem here. One of my friends assisted me with Bootstrap elements for my website, but after switching my site to Bootstrap, I am unable to change the background color on my website. Can someone lend a hand? Much appreciated! Also, while assisting me, could you please guide me on how to create a Facebook social link with the Facebook icon displayed, and when hovering over the icon, have it display in another color? Thanks again!

HTML Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome-1">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="About%20Me.html">About</a>
                </li>
                <li>
                    <a href="Pictures.html">Pictures</a>
                </li>
                <li>
                    <a href="Contacts.html">Contact</a>
                </li>
            </ul>
        </div>
</nav>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="Images/Image10.jpg" alt="...">
                <div class="carousel-caption">
                    <h3>Near my house: a meadow</h3>
                </div>
            </div>

            <div class="item">
                <img src="Images/Image4.jpg" alt="...">
                <div class="carousel-caption">
                    <h3>Flume Gorge: A Waterfall</h3>
                </div>
            </div>

            <div class="item">
                <img src="Images/Image3.jpg" alt="...">
                <div class="carousel-caption">
                    <h3>Flume Gorge: The Forest</h3>
                </div>
            </div>
        </div>

        <div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        </div>
        </div>

    <footer class="text-center">
        <div class="footer-above">
            <div class="container">
                <div class="row">
                    <div class="footer-col col-md-4">
                        <h3>Location</h3>
                        <p>School Address: Not Availible</p>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>Connect with Social Media!</h3>
                        <div>
                            <a href="https://www.facebook.com/MyUsername"></a>
                        </div>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>About Bootstrap</h3>
                        <p>Bootstrap is a free open source project that help simplifies the creation of websites</p>
                        <p><a href="http://getbootstrap.com/">Get Bootstrap Now</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-below">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        Copyright &copy; Name 2015-2016
                       <p> All music used on this site belongs to the respective authors</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

CSS Code:

.navbar-custom .nav li a {
    color: #fff;
    padding: 20px;
}

.navbar-custom .nav li a {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.navbar-default .navbar-nav>li>a {
    color: #777;
}

#carousel-example-generic{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

.footer {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}

.footer {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}
csshtmltwitter-bootstrap

Answer №1

When it comes to the first question, all you need is:

body {
    background-color: black;
}

For the second question, utilizing Font Awesome is recommended.

Below is an example I've put together demonstrating how to change the color on hover for social media icons:

<div class="background">
    <span>
        <i class="fa fa-round fa-facebook"></i>
        <i class="fa fa-round fa-twitter"></i>
        <i class="fa fa-round fa-youtube"></i>
        <i class="fa fa-round fa-linkedin"></i>
    </span>
</div>

Live Demo

EDIT: Updated link!

Answer №2

If I were to create a Facebook button, I would utilize FontAwesome. With FontAwesome, you have access to a variety of icons that can be customized using CSS, similar to Bootstrap's glyphicon.

Here's how you can do it:

1) Start by linking the FontAwesome file in the <head> section of your HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2) Choose an icon from FontAwesome's collection here and insert it into your web page, whether it's within a button or anchor tag. For instance, if you select "facebook-official", add this to your HTML:

<i class="fa fa-facebook-official"></i>

Here is an example:

<a id="fb" href="http://www.facebook.com">
 <i class="fa fa-facebook-official fa-2x"></i>
</a>

#fb{
 background-color: blue;
}
#fb:hover{
 background-color: red;
}

This code creates a link to the Facebook homepage, which changes color to red when hovered over.

I hope this information proves helpful!

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

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

htmlcsscss-floatwidth

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

jqueryhtmljsonajax

Browsers seem to only respond to the FileReader onload event on the second try

Currently I am working on implementing in-browser image processing using HTML5 and encountering a strange issue specifically in Chrome. The problem lies with the onload event handler for the File API FileReader class, as the file is only processed correctl ...

javascripthtmlangularjs

The code will only detect the browser when accessed from a mobile device, and will display a

I've experimented with various methods to make this work. My website has a streaming radio player at the top of the page, usually using the default script provided: <center> <!--Wavestreaming.com SHOUTcast Flash Player--> <scri ...

jqueryhtmlbrowser-detection

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

javascriptjquerycssjsonmenu

Text directly in the middle

Explanation In an attempt to replicate the "middle centered text" feature, such as "Responsive Front-end Development," on this website, I am currently exploring various methods. As a newcomer to web development, I have searched for templates to provide me ...

htmlcsstwitter-bootstrap

Change "Only" regular text into clickable links without altering any current hyperlinks

Looking to transform plain links into hyperlinks, while leaving existing hyperlinks untouched. A string of text is classified as a link if: It starts at the beginning of a line or after a space ((^|\s)) It is not part of an HTML hyperlink or any ot ...

phphtmlhyperlinkpreg-replace

What could be causing the issue with my Date and Time input not functioning correctly?

I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "Ty ...

cssreactjsmaterial-ui

Remove newline character from HTML code using Python 3.2 and urllib module

After fetching HTML content as a string using urllib, I encountered difficulty in searching the string due to its HTML format. Is there any way to "unformat" the string by removing all the new lines without altering the HTML code itself? Here is the Pytho ...

pythonhtmlstringformaturllib

Issues with Twitter Bootstrap Tabs not functioning correctly on Ruby on Rails with HAML

I am facing an issue with twitter bootstrap tabs in my (HAML) ruby on rails project. Although the tabs are appearing, the content does not change when I click on different tabs. Additionally, some unexpected statements are showing up at the bottom of the f ...

htmlcssruby-on-railstwitter-bootstraphaml

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7

Retrieve information from the selected row within a table by pressing the Enter key

I have a search box that dynamically populates a table. I am using arrow keys to navigate through the rows in the table. When I press the enter key, I want to retrieve the data from the selected row. For example, in the code snippet below, I am trying to ...

javascripthtmljquerycss

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

javascripthtmlcsstwitter-bootstrap

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

htmlcssjspformatting

Select the date that is three months from now using the datetimepicker feature of Bootstrap

I have two datetimepicker fields for selecting a start date and end date. I am utilizing the eonasdan datetimepicker plugin for Bootstrap. I am trying to set the range from the current date up to 3 months ahead. However, when I use maxdate:'+90d&apo ...

phphtmltwitter-bootstrapdatetimepicker

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

javascriptjqueryhtmlcss

Conceal HTML elements from the bottom as new content is being added dynamically

I am currently working on a comments feed feature. By default, only the first four comments are displayed, with an option to show more when clicking the "show more" anchor. The issue I'm facing is that if new comments are dynamically added, the CSS hi ...

javascriptjqueryhtmlcss

discovering the category for the .click function

After retrieving a list of book objects from a JSON object, I am in the process of displaying them on an HTML page by creating buttons with titles. The goal is to alert the URL of the book when a button is clicked. However, I am facing an issue with access ...

javascriptjqueryjsonhtml

Can you create a dynamic visual display using HTML5 Canvas to draw lines in a circular pattern that react

I have successfully implemented drawing lines around a circle using the AudioContext API. However, I am facing an issue with the lineTo function, as the line only grows and does not shrink. My inspiration for this project comes from the audio visualizer fo ...

javascripthtmlreactjscanvas