Add Css Style in a ViewPort of a specific page in the visual studio bootstrap

Question

Add Css Style in a ViewPort of a specific page in the visual studio bootstrap

Navigation

#1 by (0 votes)

0

I'm new to CSS and I'm studying some elements.

When creating an ASP.NET CORE MVC project with Visual Studio 2017, all content is automatically placed inside a body-content that keeps content centralized. (At least that's what I understood)

On a specific page, I'm using a ViewPort, where I'd like the entire page length to be filled by it, without changing the body-content on the other pages ...

I tried to do this:

.nome-page .body-content { width: 100%; }

and without understanding right I tried to do the reverse: .body-content .name-page { width: 100%; }

But the result I was able to change is CSS for all pages, but I repeat, I would like to change only for a specific page.

Thank you.

HTML Page:

    <section class="conteudo-cadastro">
        <div class="content">

        </div>
    </section>

CSS:

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.conteudo-cadastro {
    margin-top: 4px;
    height: 100vh;
    background-color: #747640;
}

css viewport

asked by anonymous 17.11.2018 / 20:26

1 answer

___ ___ erkimt Compare id two tables and insert value when id does not exist ______ qstntxt ___

Hello, I'm comparing two tables that have the same data, %code% and %code% , the %code% will have data deleted over time, so I need to identify the field that was deleted and insert a " exclusion status "in a column of %code% .

I'll try to explain this way:

%pre%

Code that I already have, it already performs the comparison but does not include the status of "deleted":

%pre%

______ azszpr344062 ___

Hello, you can run the query below to find out who was excluded:

%pre%

And to update the status you can execute only the command below:

%pre%

See the examples here link

___ MATLAB, how to create symbolic variables with FOR?

score 0 · Accepted Answer

To solve your problem, it is very simple to remove the borders of body adding margin: 0 to the body and remove the padding of .body-content , in the answer I just commented the padding left and right but you should remove them, your section conteudo-cadastro will occupy 100% of the viewport, but will affect the other pages, the size of the section you will have to define.

Padding is internal distance relative to its edge or inner distance from the contents to the edge. Ref

Margin is the outer distance from its edges relative to other components. Ref

body {
    padding-top: 50px;
    padding-bottom: 20px;
    margin: 0; 
}

.body-content {
    //padding-left: 15px;
    //padding-right: 15px;
}

.conteudo-cadastro {
    margin-top: 4px;
    height: 100vh;
    background-color: #747640;
}

<div class="body-content">
        <section class="conteudo-cadastro">
                <div class="content">
      
                </div>
         </section>
   </div>