Migration of Bootstrap Template to ASP.NET 4.5 Forms and Addressing Rendering Problems with Full Width Display

is a Bootstrap Template that I purchased and incorporated into my project. After migrating it to an ASP.NET 4.5 Web Forms setup, I encountered issues with the LayerSlider and Footer not rendering correctly in full width as they did on the original template.

The Master Page structure includes:

<body class="header-fixed">
<form runat="server">
    <div class="wrapper">
        <div class="header header-sticky">
            <div class="container">
            .....
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <div class="footer-v1">
            .....
            </div>
        </div>
    </div>  <!--/wrapper-->
</form>
</body>

While Default.aspx contains:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="layerslider" style="width: 100%; height: 500px; margin: 0px auto;">
    .....
    </div>
</asp:Content>

I suspect the issue may be related to the wrapper class, but I haven't pinpointed the exact cause yet. The LayerSlider and Footer are not displaying in full-width, and the Header seems wider than intended.

Your insights on this matter would be greatly appreciated!

Answer №1

By updating

<div class="container body-content">
to
<div class="container-fluid body-content">
, the issue appears to be resolved.

The CSS framework class container is defining a fixed width at specific breakpoints.

Answer №2

Here is the continuation of the solution:

The initial HTML Page Template was missing the following:

<div class="container body-content">

In the ASP.NET 4.5 Web Forms Template, Bootstrap is included. The MasterPage already contained:

<div class="container body-content">

We updated the MasterPage's div container to:

<div class="container-fluid body-content">

We created a helper class named .no-padding { padding: 0 !important; } and applied it to the container-fluid

.container-fluid .no-padding { padding: 0 !important; }

Changed the container-fluid div to look like this:

<div class="container-fluid body-content no-padding">

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

The absolute CSS dropdown isn't visible, but the relative one is displaying properly

Currently, I am in the process of creating a CSS dropdown menu. The main dropdown (the first ul) has a position set to relative, while the second dropdown has its position as absolute. However, using absolute causes this issue: On the other hand, settin ...

Angular list with a repeating group of radio buttons

I have a set of 'options', which consists of the following: {Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"} Additionally, I have a list of 'products' structured as follows: {Id: 1, Name: "Name 1", Recommend: options[0]}, {Id: ...

Clear, crisp images within a user interface web view

I currently have a webview that is set up to show an image, which can be seen in the code snippet provided below. Along with this image, there is also a [email protected] available in the bundle, sized at 128x128 for use specifically on the iPhone4 ...

Tips on concealing and deactivating the fullscreen option in flowplayer

Could someone please assist me in resolving this issue? I've been attempting to hide the fullscreen button from the flowplayer, but so far, I haven't found a solution. Below is my JavaScript code: <script> $f("player", "flowplayer/flowpla ...

Having trouble with spawning child processes asynchronously in JavaScript

I'm trying to figure out how to format this code so that when a user clicks a button, new input fields and redirect buttons are asynchronously inserted into the unordered list. Everything was working fine until I added the redirect button insertion fu ...

Is there a way to dynamically update text using javascript on a daily basis?

I am currently developing a script to showcase different content and images every day. While I have successfully implemented the image loop to display a new picture daily, I need assistance in achieving the same functionality for the title. My aim is to c ...

Is there a way to deliver information to a specific element on a client's HTML page?

My current project involves using Node.js to serve a webpage that collects user inputs and stores them in a mongodb server. The web page also displays these user inputs. I am trying to determine the best way to pass the user inputs from node.js to the < ...

Achieve an exceptional design by organizing the elements to gracefully drift from the left side to the right, seamlessly cascading from

I am currently working on a CSS and HTML layout, and I have a specific vision for how I want the layout to be displayed. It should appear from left to right and top to bottom, as shown in this image: https://i.stack.imgur.com/Q0VmR.jpg Each box within the ...

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

Which server-side technology for .NET is compatible with an AngularJS application?

As I embark on creating my first web application with AngularJS, I find myself torn between sticking with ASP.NET MVC 4 for the server side and using Angular on the client side. However, it seems like mixing these two technologies might not be the best app ...

Creating a scrollable HTML5 div container with fixed divs positioned within it

I am attempting to develop an app container that mimics the functionality of Microsoft Excel. The container should scroll both horizontally and vertically, with fixed headers on the left and top that move along with the content. Here is a rough representat ...

Directly importing text from a file into a database using asp.net5 MVC 6

Currently, I am receiving an IFormFile in my controller, saving it to a temporary folder, and then using System.IO.File.ReadAllText to retrieve the text from the file and store it in my database. Afterwards, I delete the file. Is there a way for me to bypa ...

Trouble with JavaScript loading in HTML webpage

<!DOCTYPE html> <html> <head> <title>Breakout Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas width="900" height="450" class="canvas"></canvas> ...

Is there a way to utilize JavaScript in order to trigger a CSS animation to occur at a designated time during a video

I have a cool animated image element that I want to play at a specific point in time during a video using JavaScript. I'm not sure how to make it happen, but I know the .currentTime property could be the key. My goal is for the animation to only play ...

Fixing CreateJS in Adobe Animate HTML5 Advertisement for Internet Explorer versions 9 and 10

As I work on creating an HTML5 ad using Adobe Animate CC, I encounter a minor setback. While testing the ad, I notice that it displays perfectly in most browsers except for Internet Explorer versions 9 and 10. It's interesting to see that according ...

Observing the CSS class of an input element during async validation does not yield the desired results

Recently, I implemented a bootstrap directive that monitors all the input elements on a form and updates the CSS of its parent div to display validation errors in a Bootstrap-friendly manner. The directive checks for the presence of the ng-invalid class in ...

What is the proper way to mention "a" within an unsorted list?

I currently have a div section with the following content: <ul id = "issues"> <li> <h1>title</h1> <p>text text text </p> <a class="next" href="#">next</a> </li> <li> <h1>title</h1> &l ...

Validation message does not appear when a radio button is left unchecked

I am facing an issue with my aspx page and CS code. I have implemented two radio buttons, YES and NO, where checking YES makes a textbox visible and checking NO hides it. The problem arises when the textbox is left empty - the validation error is not trigg ...

Connected Date Selector

I am new to using Bootstrap and attempting to implement a linked datepicker with the following requirements: Display only the date (not the time). The default selected date on page load should be today's date for both the Datepicker and the text ...

Retrieve the position of an element using Python and selenium

Currently, I am working on a project and need to extract the location and size of an element using the following xpath: "//div[@class='titlu']" Upon inspection, it appears that the element is visible with no distinct features. However, I have e ...