Bootstrap 4 Slider + Text. How do I format correctly?

Im trying to learn Bootstrap and get a little bit into web development, so I challenged myself to build a existing page.

This is the link to the website that I'm trying to rebuild/"copy": https://www.fahrradhaus-griesmann.de/

Now my question is, how do I format the right side with "Kontakt Impressum Datenschutz" etc. correctly to get the alignment and responsiveness?

Part of my HTML Code:

<div class="row">

                        <div class="sliderL col-xs-9">
                            <div id="slider" class="carousel slide" data-ride="carousel">

                                <!-- indicators dot nav -->
                                <ol class="carousel-indicators">
                                    <li data-target="#slider" data-slide-to="0" class="active"></li>
                                    <li data-target="#slider" data-slide-to="1"></li>
                                    <li data-target="#slider" data-slide-to="2"></li>
                                    <li data-target="#slider" data-slide-to="3"></li>
                                    <li data-target="#slider" data-slide-to="4"></li>
                                </ol>
                                <!-- wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="img/slideshow1.jpg" alt="slideshow1">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow2.jpg" alt="slideshow2">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow3.jpg" alt="slideshow3">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow4.jpg" alt="slideshow4">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow5.jpg" alt="slideshow5">

                                    </div>
                                    <!-- navigation controls -->
                                    <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="sliderR col-xs-3">
                            <div class="col-xs-12" id="sliderLink">
                                <nav class="navbar navbar-expand-md">

                                    <ul class="navbar-nav">
                                        <li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#">Impressum</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#">Datenschutz</a></li>
                                    </ul>

                                </nav>
                            </div>
                        </div>


                </div>
            </div>
        </div>

My CSS Code:

.header-container {
    background-color: #055dae;
    padding-top: 35px;
}

.header-inner {
    padding-top: 15px;
    background-color: #ffffff;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.header-adresse {
    text-align: right;

}
.header-adresse p {
    margin: 0;
}
.sliderL {

    max-width: 70%;
}
.sliderR {
    background-color: #055dae;
    max-width: 30%;
    float: right;
}
.div#sliderLink.col-xs-12 {
    margin: 0;
    padding: 0;
}

Solution

If you want to mimic how that section (or row) behaves with alignment and responsiveness, this requires bootstrap classes to be applied to both the slider and right side section.

So lets first analyze the behavior. Looking at the site and source, I confirm the following behavior on the 3 main view sizes:

Desktop - slider takes 9 columns, right side takes 3 columns
Tablet - slider takes 8 columns, right side takes 4 columns
Mobile - slider takes 12 columns and right side is hidden

So taking your HTML mark up, you could do something similar to the following which is entirely bootstrap powered:

<div class="row">
      <div class="sliderL col-lg-9 col-md-8 col-xs-12">
       ...
       ...
      </div>
      <div class="sliderR col-lg-3 col-md-4 hidden-sm hidden-xs">
       ...
       ...
      </div>
</div>