Bootstrap width does not work on .NET Core 6

user_14374049 0
Viewed 179

I tried everything, from documentations, last 10 stack overflow answers, and nothing helped. I tried with:

<meta name="viewport" content="width=device-width, initial-scale=1">

I tried with @@meedia in style, I tried with w-100 on card body, everything and nothing helps. I need whole application like this to have normal width so please help. I have VS 2022 with .NET 6 onboard.

I just cannot make when I start an application (on desktop) and go on F12, put on mobile. The card-body is really long and I want to set width of card-body to mobile screen size. i DO NOT KNOW where is the problem ...

Code is this:

<div class="row">
<div class="col-sm-12">
    <div class="card bg-light w-100 p-0">
        <div class="card-body">
            <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaKuce">Prodaja kuća</a>
        </div>
    </div>
</div>
<div class="col-sm-12">
    <div class="card bg-light w-100 p-0">
        <div class="card-body">
            <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaStanova">Prodaja stanova</a>
        </div>
    </div>
</div>
<div class="col-sm-12">
    <div class="card bg-light w-100 p-0">
        <div class="card-body">
            <a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaNekretninaZaOdmor">Prodaja nekretnina za odmor</a>
        </div>
    </div>
</div>

and the final result is still the same. Yup.

Picture

model-view-controller css asp.net html .net
1 Answers

Two things, the first one, you need to add m-0 in <div class="row m-0">. The second one, you have forget a </div> at the end of you source code here upper for close the div for the row.

Edit :

In general, for debug CSS problems, you best friend is the inspector of the web browser. With this one you can :

  • Do a right click on the element of you page then click on Inspect.
  • In the bottom left side, you see the HTML code and the selected element.
  • In the bottom middle side, you see all CSS for the selected HTML element.
  • In the bottom right side, you can see the box model with the margin, padding and size.

Inspector web browser

It's a really helpful tool for debugging HTML/CSS.

user_134736370
Related