Solution 1 :

Sounds like bootstrap isn’t loading.
I would reinstall bootstrap and/or check your package references.

Problem :

I’m having an issue with one of my webpages in my ASP.NET MVC Application. I have the HTML in Webstorm, and when I open it from there, it looks as intended. When I then copy over to the View in Visual Studio all of the Form controls are a mess.
Even if I directly copy everything from Webstorm into the _layout.cshtml, leaving only the script and style links (and RenderBody();) it’s still completely off.

The Form itself is just copied from getbootstrap.com so it should be just fine. I have no clue what the issue could be, I hope someone has an idea.

Link so you can see the issue: https://imgur.com/a/bxFrr3P

Markup from Webstorm:

<div id="wrapper" >

    <div id="content-wrapper" class="d-flex flex-column ">
        <!-- Main Content -->
        <div id="content" style="width: 100%;">
            <hr>
            <div class="container-fluid">

                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">Page Title</h1>
                </div>

                <div class="col-xl col-md mb-4 " >
                    <div class="card shadow h-100 py-2 card-background" >
                        <div class="card-body" style="padding: 0px;">

                            <div class="box-part text-center mt-2 mr-2 mb-2 ml-2 m-3">

                                <form>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputEmail4">Email</label>
                                            <input type="email" class="form-control" id="inputEmail4">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputPassword4">Password</label>
                                            <input type="password" class="form-control" id="inputPassword4">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputAddress">Address</label>
                                        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputAddress2">Address 2</label>
                                        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputCity">City</label>
                                            <input type="text" class="form-control" id="inputCity">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="inputState">State</label>
                                            <select id="inputState" class="form-control">
                                                <option selected>Choose...</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <label for="inputZip">Zip</label>
                                            <input type="text" class="form-control" id="inputZip">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="gridCheck">
                                            <label class="form-check-label" for="gridCheck">
                                                Check me out
                                            </label>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

Comments

Comment posted by mason

Did you investigate what style properties are missing on your “bad” elements when you look at them in the browser? Then figure out where the missing ones come from in the “good” copy? And then find out if that proper code is in place on the “bad” side?

Comment posted by the_lotus

Try F12 in the browser and analyse which css is being used for a bad display. There’s probably a small difference in the css. It could also be that the browser emulate an older browser that doesn’t accept some of the css that is being used.

By