Need help with bs4

HTML-CSS
1

Hey i need help with my site, want to get the nav on the right side and the pic on the left,
but it always sticks under the picture…
idk whats the difference to my other sites never had this issue…
im not manipulating this section or classes in css either…

thanks f

<!-- Section-A -->
    <div class="container-fluid">
      <div class="row">
        <div class="showcase">
          <div class="col col-lg-6- col-md-6 col-sm-6">
            <img class="rounded img-fluid img-responsive showcase_pic" src="./pics/1024x768/showcase_pic.png" alt="">
          </div>
          <div class="col col-lg-6 col-md-6 col-sm-6">
            <nav class="side_nav">
              <ul class="nav flex-column">
                <li><a class="nav-link active" href="#">Home</a></li>
                <li><a class="nav-link" href="#">Preise</a></li>
                <li><a class="nav-link" href="#">Bikespots</a></li>
                <li><a class="nav-link" href="#">About Us</a></li>
                <li><a class="nav-link" href="#">Partner</a></li>
                <li><a class="nav-link" href="#">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
2

Can you post link to your codepen instead?

3

its not on codepen =/ just coding this site locally…

4

Try change the “row” with the “showcase” like this:

You need to put your columns inside your row. Hope this helping. Happy coding.
5

Sorry i don’t out the code above, there here is:

<div class="container-fluid">
      <div class="row">
        <div class="showcase">
6

row class has display: flex
col has flex property

col need to be the flex child of row for the flex property to work.

Hence your code need to be:

    <div class="row">
      <div class="col col-lg-6- col-md-6 col-sm-6">
/* notice you also have col-lg-6 class with extra - */

Another note:
col-lg-6 col-md-6 col-sm-6 applying width 50% on every browser sizes. All you need is col-sm-6 and the width 50% will get applied to all browser size larger than sm.

1 Like
7

Thanks but already solved it! It was the typo :slight_smile: :roll_eyes:

8

If you want use toggle for your nav bar (it is awesome for small device), see this code with your title.

9

thank you. well indented code too