Reduce Left Margin / MVC

SSinhg 286

Hi,

How do I reduce the left margin or start after certain length from left?

AgaveJoe 26,186 Reputation points

2022-01-10T14:20:05.007+00:00

The community cannot help you without the HTML layout and the CSS design.

I recommend that you try fixing this problem on your own by using the browser's dev tools to view the styles applied to the elements on the page.
Karen Payne MVP 35,031 Reputation points

2022-01-10T14:36:01.523+00:00

If using BootStrap look at using container class for the top most div along with using BootStrap grid system is one option via row and col, couple this with sizing and media queries. What is possible here is dependent on version of BootStrap e.g. 5 is the better version. Visit Bootstrap docs for options.
SSinhg 286 Reputation points

2022-01-10T14:38:25.98+00:00

Thanks @Karen Payne MVP let me have go with it.

Accepted answer

Karen Payne MVP 35,031

Had a few minutes to give you some starter code which is meant to show possibilities, not a solution directly.

In _Layout.cshtml

<div class="container-fluid border border-warning">  
    <main role="main" class="pb-3">  
        @RenderBody()  
    </main>  
</div>

index.cshtml

@page  
@model IndexModel  
  
@{  
    ViewData["Title"] = "Home";  
}  
  
<style>  
    .container-fluid {  
        padding-right: 30px!important;  
        padding-left: 30px!important;  
    }  
</style>  
  
<div class="row">  
    <div class="col bg-light">Left 1</div>  
    <div class="col-auto">Right 1 . . . .</div>  
</div>  
  
<div class="row">  
    <div class="col bg-info">Left 2</div>  
    <div class="col-auto float-end"> . . . . . . . Right 2</div>  
</div>  
  
<div class="row">  
    <div class="col bg-light">Left 3</div>  
    <div class="col-auto text-end">Right 3 . . . . . . . </div>  
</div>  
  
<div class="row">  
    <div class="col-8 bg-info">Left 4</div>  
    <div class="col-3 text-end">Right</div>  
</div>  
  
<div class="row">  
    <div class="col-sm-9 bg-light p-3 border">  
        .col-sm-9: width of 75% above sm breakpoint  
    </div>  
    <div class="col-3 bg-light p-3 border">  
        .col-3: width of 25%  
    </div>  
</div>  
  
<div class="row">  
    <div class="col-sm-6 bg-info"><p class="float-start">left</p></div>    
    <div class="col-sm-6"><p class="float-end">right</p></div>    
</div>

Reduce Left Margin / MVC

0 additional answers