Implementing grid Bootstrap 4 and SideNav

Hello, friends. I'm doing a little project and I'm having difficulty using grid and sidenav bootstrap, I want to make a side fixed menu, without responsiveness with 30% of the screen size and the other 70% I will implement tables and forms, could someone help me?

The side menu I managed to make a part, just do not know if it is correct.

insert the description of the image here

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css">

    <title>CRUD</title>
    <style>
        #sidebar-wrapper {
        left: -300px;
        width: 300px;
        background-color: #51A8B1;
        color: white;
        position: fixed;
        height: 100%;
        z-index: 1;
        }
        .sidebar-nav {
        position: fixed;
        top: 0;
        margin: 0;
        padding: 0;
        width: 300px;
        list-style: none;
        }
        .sidebar-nav li {
        font-size: 20px;
        text-indent: 55px;
        line-height: 70px;
        }
        .sidebar-nav li a {
        color: white;
        display: block;
        text-decoration: none;
        }
        .sidebar-nav li a:hover {
        background: #448B93;
        color: white;
        text-decoration: none;
        }
        .sidebar-nav li a:active, .sidebar-nav li a:focus {
        text-decoration: none;
        }

        #ufpb-logo{
        margin-top: 50px;
        margin-bottom: 50px;
        padding-left: 110px;
        }
        #sidebar-wrapper.sidebar-toggle {
        transition: all 0.3s ease-out;
        margin-left: -200px;
        }

        #main{
        padding-left: 70px;

        }
        @media (min-width: 768px) {
        #sidebar-wrapper.sidebar-toggle {
            transition: 0s;
            left: 200px;
        }
        }
    </style>
</head>
<body>
    <!--SideNav-->
    <div class="container">
        <div id="sidebar-wrapper" class="sidebar-toggle">
            <ul class="sidebar-nav">
                <div class="row" id="ufpb-logo">
                    <a href="#"><img width="111px" height="160" src="assets/img/ufpb2.png"/></a>
                </div>
                <li>
                    <a href="#item1">Produtos</a>
                </li>
                <li>
                    <a href="#item2">Entradas</a>
                </li>
                <li>
                    <a href="#item3">Saídas</a>
                </li>
                <li>
                    <a href="#item3">Resumo</a>
                </li>
                <li>
                    <a href="#item3">Sair</a>
                </li>
            </ul>
        </div>  
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</body>
Author: Comunidade, 2018-03-03
Source

1 answers

Your Code actually needs some tweaking. Starting with the first div with the Container class. In fact you will not need it, by default Bootstrap puts some values in this class that are not interesting for your Layout.

Something else. If you want part of the screen with 30% and the other with 70% it makes no sense to use PX values.

I made this very basic model, trying to make the most of your code and only taking some values in PX, like this I split the screen with 30% in #sidebar and the other 70% in <main> (you have to do the responsiveness part to get everything straight if you want) 

#sidebar-wrapper {
background-color: #51A8B1;
color: white;
position: fixed;
height: 100%;
width: 30%;
z-index: 1;
}
.sidebar-nav {
position: fixed;
top: 0;
margin: 0;
padding: 0;
list-style: none;
width: 30%;
}
.sidebar-nav li {
font-size: 20px;
text-indent: 55px;
line-height: 70px;
}
.sidebar-nav li a {
color: white;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
background: #448B93;
color: white;
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}

#ufpb-logo{
margin-top: 50px;
margin-bottom: 50px;
}
#sidebar-wrapper.sidebar-toggle {
transition: all 0.3s ease-out;
}

#main{
padding-left: 70px;

}
@media (min-width: 768px) {
#sidebar-wrapper.sidebar-toggle {
    transition: 0s;
}
}
main {
    background-color: tomato;
    width: 70%;
    margin-left: 30%;
    height: 100%;
    position: fixed;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

<div class="">
    <div id="sidebar-wrapper" class="sidebar-toggle">
        <ul class="sidebar-nav">
            <div class="row justify-content-center" id="ufpb-logo">
                <a href="#"><img width="111px" height="160" src="assets/img/ufpb2.png"/></a>
            </div>
            <li>
                <a href="#item1">Produtos</a>
            </li>
            <li>
                <a href="#item2">Entradas</a>
            </li>
            <li>
                <a href="#item3">Saídas</a>
            </li>
            <li>
                <a href="#item3">Resumo</a>
            </li>
            <li>
                <a href="#item3">Sair</a>
            </li>
        </ul>
    </div>
    <main>
        Seu conteudo
    </main>
</div>

OBS1: the code is not perfect, you can still use the classes of the Bootstrap4 Flex for better more your layout, follow the link of the official documentation https://getbootstrap.com/docs/4.0/utilities/flex /

OBS2: with Bootstrap vc Grid fails make a part with 30% and another with 70%, because it only works with multiples of 12. The closest you can get is to use Col - 4 and Col-8 having a portion of 33% and another of 64% approximately. See documentation link: https://v4-alpha.getbootstrap.com/layout/grid /

 0
Author: hugocsl, 2018-03-05 14:53:34