problem with the footer of a bootstrap modal

I am facing a minor CSS issue with the Bootstrap footer in my modal. There is an unexpected line appearing across the top, and it seems to be caused by the footer. Initially, I had the same problem with the header but managed to fix it; now the issue persists in the footer. Can someone please take a look at this and figure out what's causing it?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                    <div class="container"> 
                        <!-- Trigger the modal with a button -->
                            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Get Started</button>

                        <!-- Modal -->
                        <div class="modal fade" id="myModal" role="dialog">

                            <div class="modal-dialog modal-lg">
                                <div class="modal-content modal-lg">

                                    <p>
                                        <h3 style="margin-left: 30px;">We've simplified our processes...</h3>
                                    </p>

                                    <div class="modal-body modal-lg">
                                        <div class="container col-md-12">
                                            <div class="row">
                                                <div class="col-md-1">
                                                    <button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-cog"></i></button>
                                                </div>

                                                <div class="col-md-11">
                                                    <ul>
                                                        <li>Spent xyz</li>
                                                        <li>Spent xyz</li>
                                                        <li>Spent xyz</li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-primary btn-block">Annual campaign planning</button>
                                            <br>

                                            <div class="row">
                                                <div class="col-md-3">
                                                    <button type="" class="btn btn-primary">Plan It</button>
                                                    <br>
                                                    <ul>
                                                        <li>1</li>
                                                        <li>2</li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3">
                                                    <button type="" class="btn btn-primary">Create It</button>
                                                    <br>
                                                    <ul>
                                                        <li>1</li>
                                                        <li>2</li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3">
                                                    <button type="" class="btn btn-primary">Deliver It</button>
                                                    <br>
                                                    <ul>
                                                        <li>1</li>
                                                        <li>2</li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3">
                                                    <button type="" class="btn btn-primary">Measure It</button>
                                                    <br>
                                                    <ul>
                                                        <li>1</li>
                                                        <li>2</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer modal-lg">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                

Answer №1

By modifying the .footer-style class, you can troubleshoot the problem.

.footer-style {
padding: 10px;
}

I hope this solution resolves your issue.

Answer №2

The problem lies with the footer's border at the top. You can resolve this issue by adding the following CSS:

.footer-section {
    border-top: none;
}

Implementing this code should fix the problem without a doubt!

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

Is there a way to instruct the code to select between two variables and align their values?

I have encountered a challenge while working on a unit test. The website I am testing is dynamic, causing the CSS Selector and xpath to frequently change. As a solution, I came up with the idea of using both CSS and xpath to retrieve the same text. Curren ...

Basic adaptable menu for easy navigation

I have designed a custom menu in HTML: <div class="trigger" style="display:none;">menu</div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a& ...

tips for aligning text and buttons on the same line

Is there a way to align the button with the text on the same line, instead of it dropping down (refer to the image below)? https://i.sstatic.net/hQ3YC.png This is my current html and css code (utilizing bootstrap): <a href="#" class="mx ...

Issue with overriding font-family variable in Bootstrap 5 not resolving

I have configured Proxima+Nova font for my Angular application style.css @import url('https://fonts.googleapis.com/css?family=Proxima+Nova'); Attempting to change the root font using bootstrap variables as shown below $variable-prefix: ...

Utilizing Different Themes Based on Route with React-Router and Material-UI

I'm currently learning how to utilize the Material-UI library. As I explore its capabilities, I have discovered that I can use createStyles within a component to style it, and I can also leverage createMuiTheme to establish a global theme. My goal is ...

Should the potential benefits of implementing Responsive Design in IE8 be taken into account in 2013?

It seems that there are still questions lingering about how to make responsive design compatible with outdated browsers like IE8 or even the dreaded IE7. Personally, I question the need for implementing responsive design specifically for IE8, considering ...

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

What is the secret to ensuring a contenteditable div only accepts plain text?

One issue I have encountered is that when copying and pasting styled text into a div textarea, the style remains attached to the text. Although setting contenteditable='plaintext-only' can resolve this problem in Webkit browsers, it does not work ...

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

A visible white line appears within the image when the Windows scaling is set to 125%

I encountered a peculiar issue. A certain website displays an image with a 5px solid border, but when I adjust the Windows scale settings to 125%, there is a noticeable gap between the image and the border. https://i.sstatic.net/FWLIN.png https://i.sstat ...

Retrieve all the child elements belonging to the specified XML layer

I am looking to target all child elements that are part of a specific layer in the XML structure, starting from a given element. For example, if the XML layout is as follows: <teststep id="1"> <description>Teststep 1</description> ...

Appearing text dialogue

Can you tell me the name of the box that appears on top of a webpage? A couple of examples include: Facebook photos - It dims the background webpage and opens a separate pop-up to display pictures. Advertisements - The box that typically requires clickin ...

Open HTML Frameset in a new tab or window

I've been contemplating for the past week on how to address my issue using frameset. Situation: I have an html file for header, footer, menu, and content, each with its own background color. I implemented a frameset for enhanced design. The header ...

Developing an Easy-to-Use PDF Popup Interface

I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up. I want to replace the imag ...

view multiple HTML documents simultaneously in a single browser tab

Currently, I am in the process of building a wiki and have included tables in various sections. I want to showcase these tables on the main page as well. Rather than constantly copying and pasting them, I'm looking for a way to have the main page auto ...

``What is the best way to adjust the layout of

I've been using the CSS code below to center items on my page: #MainBox { width: 488px; height: 181px; position: absolute; left: 50%; top: 236px; margin-left: -244px; //this being half the width } However, when viewing the pag ...

Tips for creating a flexbox layout that is responsive to different screen

Currently, I am using flex to ensure that the two inner div elements have the same height. However, the design is not responsive as it appears perfectly in a full-width window but gets squeezed on mobile devices. Is there a solution to this issue? Are th ...

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...