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

What is the best way to attach a value to an attribute of a web component in Angular?

In all honesty, I am quite new to Angular and still learning the ropes. Currently, I am faced with a debugging challenge related to one of the users encountering an issue with my web component library. Within this library, there is a custom element create ...

htmlangularlit-element

Changing the animation associated with a hover action - tips and tricks!

My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...

htmlcssvue.jshovercss-animations

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen? I&a ...

htmlcssangulartypescript

Adjusting the height of an element based on changes in screen width or height using Angular

I'm in the process of developing a directive that can detect changes in screen size, either width or height, and adjust the height of my element accordingly. The main goal is to have my element extend all the way to the bottom of the browser window. ...

angularjscssangularjs-directive

Tips for selecting the correct date on a DatePicker using selenium?

I am facing an issue with my selenium test related to a date picker on a webpage. The task is to select a specific date (e.g., 14/2/2012) by clicking on the correct day. However, the date picker is generated using jQuery as shown in the code snippet belo ...

javascripthtmlselenium

Secondary menu supersedes primary dropdown menu

Having trouble getting a vertical dropdown menu to work properly, with the submenus overriding the main menu. I've searched everywhere for a solution but can't seem to find one. Anyone out there who could help me figure this out? Here's the ...

htmlcss

Attempting to align a FieldSet in the middle of the page

Having trouble aligning a field set within a div. The first two elements are centered right next to each other, but the third one is justified left and I'm struggling to center it within the div. JSP <tr> <th> <span onclick="toggleDiv ...

htmlcss

Switching from HTML to PHP programming

Trying to build a website from scratch and incorporate a form has been challenging. My goal is for the Submit button to send an email without launching any email program, but I'm facing redirection issues. Despite searching on Google for solutions, I ...

phphtmlhttp-redirect

The design I created includes a horizontal scroll feature and certain elements are not properly aligned in the

Oh man, I'm really frustrated right now. I want all my elements to be centered horizontally on smaller devices, but some of them are slightly off to the side. And to top it off, there's a horizontal scroll appearing - it's like something is ...

htmlcss

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

How to implement CSS styling for a disabled component

In my application, I have a FormControlLabel and Switch component. When the Switch is disabled, the label in FormControlLabel and the button in Switch turn gray. However, I want to maintain the color of both the label (black) and the button (red). To test ...

cssreactjsmaterial-ui

When using html-pdf-chrome to print to an A4 PDF, there appears to be a significant space below the A

In my Laravel project, I am currently utilizing the westy92 / html-pdf-chrome library to convert HTML to PDF. The front-end of my project is based on React. I have defined a series of divs to act as A4 pages: <div id="pdf" className="pri ...

phphtmlcssreactjspdf

Highlight the navigation transition in the menu

Is there a more updated tutorial available for creating an underline effect that slides from one link to another when hovered over and remains at the clicked link? I have come across a tutorial on Underline transition in menu which seems to be based on th ...

javascripthtmlcsscss-transitions

Glitches of white light during loading screens on your Prestashop website

There's a strange occurrence on the website where it flashes white DURING (not just at the start) every time a page loads. Initially, the page seems to load smoothly and almost completely, but then there is a sudden flash before all elements are disp ...

htmlcssprestashop

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

javascripthtmlangularjsionic-framework

Exploring the Application of CSS Styles in Selenium

I need help with a webpage that contains a configurable field. The values of this field can be set through a configuration panel, and it can be marked as required by checking a checkbox which applies a specific style to the field label. My question is, how ...

c#cssseleniumwebdriver

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect. Any assistance would be greatly appreciat ...

javascriptjqueryhtmlcss

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

phphtmljquerywordpressadvanced-custom-fields

When I start scrolling down, the Jumptron background image vanishes

Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...

javascripthtmlruby-on-railstwitter-bootstrapcss

HTML button failing to connect with CSS stylesheet

I am currently teaching myself CSS and using W3schools for guidance. Recently, I added a button to my website that redirects users to another page upon clicking. Everything functions correctly, but now I want to style the button using CSS. However, despit ...

htmlcss