Move sidebar to the right

Asked

Viewed 112 times

0

I’m trying to move my sidebar with bootstrap in css to direct. but I’m not getting it.

Could someone help?

SIDEBAR:

  <div class="d-flex" id="wrapper">

<div class="bg-light border-left" id="sidebar-wrapper">
  <div class="sidebar-heading">ATIVIDADE</div>
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action bg-light">teste</a>
  </div>
</div>

CSS from the SIDEBAR:

    #sidebar-wrapper {
  
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}
php css

  • Here is working normal, below 768px the sidebar some and above that back. Your problem is not clear!

  • That, here too, but she’s on the left of the page, I tried to leave it on the right but I couldn’t @hugocsl

1 answer

3


Guy looks like you copied this code, because it has a lot of css there unnecessary, and basically it’s put a margin-left: auto and change where it is left for right

Click to display across page and you’ll see the sidebar appearing from the right

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  #sidebar-wrapper {
    margin-left: auto;
    margin-right: -15em;
    min-height: 100vh;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
  }

  #sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
  }

  #sidebar-wrapper .list-group {
    width: 15rem;
  }

  #wrapper {
    overflow: hidden;
  }

  @media (min-width: 768px) {
    #sidebar-wrapper {
      margin-left: auto;
      margin-right: 0;
    }
  }
</style>
</head>

<body>

  <div class="d-flex" id="wrapper">

    <div class="bg-light border-left" id="sidebar-wrapper">
      <div class="sidebar-heading">ATIVIDADE</div>
      <div class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action bg-light">teste</a>
      </div>
    </div>
  </div>


</body>

</html>

  • Opa mano @hugocsl, thanks! Of course I had to change many times and ended up putting unnecessary things even, sorry! There’s only one thing, like I have a page content that is giving conflict with the side bar. I’ll send you a print for you to see. https://prnt.sc/t2wxun. The side bar is occupying the space there, in which case the content would have to be on the side. How could it solve.. Sorry to bother you

  • @Ezequiel the stuff got ugly there huh... try to put position: Bsolute in this component, sometimes solves

  • It was great haha, when I put the Bsolute the sidebar some... #sidebar-wrapper {&#xA; position: absolute;....

  • @Ezequiel the Absolute is not in the sidebar, it is in the other container, in the container that is getting down

  • .container-fluid {&#xA; position: absolute;&#xA;} That way? , didn’t solve either... That’s why I complicated myself to move, always when I put Absolute the sidebar was gone

  • I ended up never progressing in the code, I ended up getting lost

  • Apparently Absolute did not help, yet it still remains in that format as stated in the print above https://prnt.sc/t2wxun

  • mano se liga nisso, https://prnt.sc/t2xcbz 1236px de margem Kkkk

  • @Ezequiel guy if you do not master flex, position and display vc will not be able to create any kind of layout... for a half hour to do a flex course on youtube, it is free and you will quickly pick up the base. What I did was answer your question, you wanted the bar on the right, I put it on the right, but if you don’t know what you’re doing you won’t be able to finish the layout just on the kick... With what you posted in the question the result is this, if you have any other question just open another question and put the code that presents the problem, so I or another can help you

  • All right, thanks!

  • 1

    ...........

Show 6 more comments

Browser other questions tagged php css

You are not signed in. Login or sign up in order to post.