Setting up a responsive footer using Bootstrap and responsive design involves following a few key steps

Seeking assistance with making the footer of my website responsive using a combination of Bootstrap and custom CSS.

I am aiming for a result similar to the examples shown below, both optimized for Desktop and Mobile platforms. Your help in achieving this is greatly appreciated.

Desktop

https://i.stack.imgur.com/MgHvn.jpg

Mobile

https://i.stack.imgur.com/duzhH.jpg

Below is the current code snippet:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="container">
<div class="row">
<div class="col-12">
  <h3 >Connect With Us</h3>
  <div class="border-bottom"></div>
</div>
</div>
<div class="row padding-top-15px">
<div class="col-md-8 col-sm-12 col-xs-12">
<form>
  <input type="text" placeholder="Name" required />
  <input type="email" placeholder="Email" required />
  <input type="submit" value="Subscribe" class="btn swatch-1"> 
  <a href="#" data-toggle="modal" data-target="#invitefriendModal" class="btn">Refer a Friend</a>
</form>
</div>

<div class="col-md-4 col-sm-12 conl-xs-12"> 
<div class="footer-social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" target="_blank" >Legal</a> <span>Accreditation Number</span>
</div>
</div>
</div>
  </div>
    </footer>

htmlcsswebbootstrap-4

Answer №1

@import url('http://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900');
    body {
      font-family: Open Sans, Arial;
      }
    .btn.swatch-1{background-color: #20b8cd;color: #fff !important;}
    .btn{font-size: 1em;line-height: 1.6em;border-radius: 0.2em;border:none;padding: 0.3em 2em;}
    footer{
        padding: 2% 4% 1%;
        color: #fff;
        background: #1b1b1b;
        font-size: 0.8em;
    }
    placeholder{
        padding:0px;
        color:#fff;
    }
    footer input[type="text"],input[type="email"]{
        background-color:transparent;
        border-bottom:2px solid #fff;
        border-top:none;
        border-left:none;
        border-right:none;
        margin: 0px 20px 0px 0px;
        font-family:Open Sans, Arial, sans-serif;
        font-size:1.2em;
        color:#fff;
    }
    footer input[type="email"]{
        margin-right:10px;
    }
    footer a {
        margin: 0 1em;
        white-space: nowrap;
        color: #fff;
        line-height: 2em;
    }

    footer small {
        display: block;
        margin: 1em 1.7em;
        font-size: 0.7em;
        opacity: 0.4;
    }

    footer .socials i {
        margin: 0em 0.1em;
        font-size: 1.2em;
        line-height: 1.6;
        display: block;
    }

    footer .socials {
        border: 1px solid #fff !important;
        display: inline-block;
        border-radius: 2em;
        padding: 0;
    }

    footer a.btn {
        border: 1px solid #fff !important;
        text-transform:uppercase;
    }
    footer .btn {
        text-transform:uppercase;
    }
    footer h3{
        text-transform:uppercase;
        
    }
    footer h3:after{
        height:5px;
        width:60px;
        background-color:#03d1c1;
        margin-bottom:10px
        
    }
    footer .footer-social .fa {
      padding: 10px;
      font-size: 15px;
      width: 35px;
      text-align: center;
      text-decoration: none;
      margin: 0px 2px;
      border-radius: 3px;
    }

    footer .footer-social .fa:hover {
        opacity: 0.7;
    }

    .fa-facebook {
      background: #3B5998;
      color: white;
    }

    .fa-twitter {
      background: #55ACEE;
      color: white;
    }

    .fa-google {
      background: #dd4b39;
      color: white;
    }

    .fa-linkedin {
      background: #007bb5;
      color: white;
    }

    @media (max-width: 575.98px) {

    footer {
        font-size: 1em;
    }
    footer h3{
        text-align: center;
        text-transform: uppercase;
        font-size: 1.8em;
        font-weight: 600;
    }
    footer .border-bottom{
        height: 5px;
        max-width: 100px;
        background-color: #46b8cd;
        /* border-bottom: none; */
        border-bottom: none !important;
        margin: 0 auto 10px auto;
    }
    footer .footer-social{
        margin-top: 20px;
    }
    footer input[type="text"], input[type="email"] {
        margin-top: 10px;
        width:100%; 
    }
    footer .btn {
        margin: 20px 0 0 0;

    }
    footer form{
        text-align: center;
    }


    }

Please find the CSS code below that was inadvertently excluded earlier.

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

Do you need to align images side by side and have clickable images positioned beneath each one?

After searching high and low, I couldn't find a similar question. My goal is to transform this from a vertical layout to a horizontal one: https://i.stack.imgur.com/4kZNM.png Check out the code snippet below: ghost<br class="newline"> <img ...

htmlcss

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

javascriptjqueryhtmlcss

Tips for accessing the height property of an image

Is there a way to determine if an image lacks the height style property? Exploring CSS in HTML <img id="image" src="images/sports/sports9.png" style="width:100px"> Using jQuery if($('#image').css('height') == 0) { var ima ...

jqueryhtmlcss

Enlarge an image when hovering over it

I am currently in the process of creating a website and I have encountered an issue. When I hover over an image, I want it to zoom in, but unfortunately it does not zoom within the designated div area. How can I fix this problem? <div class="container" ...

htmlcss

Using Angular Ionic 3 to apply the disabled attribute

I have a situation in my main.ts where I need to disable a textarea in the HTML if an object is initialized. I've attempted various methods like: ng-attr-disabled="!myObj"; ng-attr-disabled="{myObj!= null}"; and also directly using ng-disabled. I e ...

htmlangulartypescriptionic-frameworkionic3

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

htmlcss

Fade background position rollover effect

I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyo ...

jquerycss

What methods are available to generate dynamic shapes using HTML?

Looking to create an interactive triangle where users can move vertices or sides, updating angles in real-time. I'm struggling with how to accomplish this task. My initial attempt was to manually draw the triangle using the code below. <!DOCTYPE ht ...

javascripthtmlcss

The button labeled "modify layout" remains unresponsive when activated

Allow me to start by saying that I am not a coding expert. Currently, I am enrolled in a computer science class and have a basic understanding of HTML, CSS, and some Javascript. However, I have encountered a problem that I cannot solve. When I click on th ...

javascripthtmlfunctiononclick

What are the steps to ensure a form does not trigger the action URL and instead only prints the data upon submission

Currently, I am working on creating a form that will submit without opening the action URL when a button is clicked. Additionally, after submission, I want to display a message and clear the form. Can anyone guide me on how to achieve this? <form id="c ...

javascriptphphtmlforms

Having trouble transmitting POST values through AJAX requests

I am facing an issue with two separate files, bargraph.html and data.php. Here is the content of bargraph.html: <form method="POST" name="dataform" action=""> <select name="data1" id="data1-value"> <option value="DateRecorded">Dat ...

phphtmlmysqlajaxpost

When utilizing JavaScript within an Electron application file that is linked with a script tag in an HTML document, there may be limitations on using node modules with

While working on my Electron application, I encountered an issue with referencing a node module using require within an HTML form that includes JavaScript. Specifically, I am having trouble integrating the 'knex' node module into my code. Here i ...

javascripthtmlelectron

Top method for expanding a SASS class using an inner selector (sub-class)

When it comes to styling HTML to display messages, here's what I have: <div className="message"> <div className="message_label"> A message </div> </div> To style these messages, I am using the SCSS class bel ...

htmlcssreactjssass

Guide to applying Bootstrap styles to a specific section of an HTML document

What can I do to ensure that the Bootstrap library used by the main app does not affect the styling of my controls when integrating my web application inside the main app? I want to maintain the current styles of my controls without any interference from ...

htmlcsstwitter-bootstrap

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

javascriptjqueryhtmlcss

A pair of div containers with one set to adjust its height automatically and the other to

I have a container with a height set to 100%. Inside, there are two child divs. Is it achievable to achieve the following heights: First div equal to the height of its content Second div equal to the remaining free space in the container ...

htmlcss

django displaying a blank screen

I'm having trouble with the code, forms.py from django.form import datetime, widgets import datetime import calendar from bootstrap_datepicker.widgets import Datepicker class DateForm(forms.Form): date_1=forms.DateTimeField(widget=DatePicker( ...

pythonhtmldjango

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Filtering and selecting tables in HTML

I am dealing with an HTML table that combines static data and MySQL input. The filtering functionality is working properly, but I am struggling to add the options "yes" and "no" to the selection list. These values are test inputs fetched from MySQL. I need ...

javascriptjqueryhtmlmysqlhtml-table

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

htmlcss