Home > Mobile >  How to make vertical navbar with writings right side in bootstrap grid system
How to make vertical navbar with writings right side in bootstrap grid system

Time：01-02

I'm trying to learn bootstrap but I have an issue with it. I made vertical navbar at left side of my site and on the right side there should be writings but I couldn't the way of do it. I tried lots of code and combinations to do it way of in grid system. I there any way to do it ?

i took the css and html from internet and modded codes.

body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  background: #fafafa;
  color: gray; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  color: #f8b739; }
  a:hover, a:focus {
    text-decoration: none !important;
    outline: none !important;
    -webkit-box-shadow: none;
    box-shadow: none; }

button {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  button:hover, button:focus {
    text-decoration: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important; }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  line-height: 1.5;
  font-weight: 400;
  font-family: "Poppins", Arial, sans-serif;
  color: #000; }

.ftco-section {
  padding: 7em 0; }

.ftco-no-pt {
  padding-top: 0; }

.ftco-no-pb {
  padding-bottom: 0; }

.heading-section {
  font-size: 28px;
  color: #000; }
  .heading-section small {
    font-size: 18px; }

.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; 

}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }

.navbar-btn {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important;
  border: none; }

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0; }

.wrapper {
  width: 100%; }

#sidebar {
  min-width: 175px;
  max-width: 250px;
  background: #1d1919;
  color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  #sidebar.active {
    margin-left: -300px; }
  #sidebar .logo {
    display: block;
    width: 175px;
    height: 175px;
    margin: 0 auto; }
    #sidebar .logo span {
      display: block; }
  #sidebar ul.components {
    padding: 0; }
  #sidebar ul li {
    font-size: 16px; }
    #sidebar ul li > ul {
      margin-left: 10px; }
      #sidebar ul li > ul li {
        font-size: 14px; }
    #sidebar ul li a {
      padding: 10px 0;
      display: block;
      color: rgba(255, 255, 255, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
      #sidebar ul li a:hover {
        color: #f8b739; }
    #sidebar ul li.active > a {
      background: transparent;
      color: #f8b739; }
  @media (max-width: 991.98px) {
    #sidebar {
      margin-left: -200px; }
      #sidebar.active {
        margin-left: 0; } }

a[data-toggle="collapse"] {
  position: relative; }

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }




.btn.btn-primary {
  background: #f8b739;
  border-color: #f8b739; }
  .btn.btn-primary:hover, .btn.btn-primary:focus {
    background: #f8b739 !important;
    border-color: #f8b739 !important; }

.footer p {
  color: rgba(255, 255, 255, 0.5); }

  
h2.headertext {
  text-align: center;
}



body, html {
  height: 100%;
}


html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("./images/backgr.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<!doctype html>
<html lang="en">

<head>
  <title>Çakır</title>
  <meta charset="utf-8">
  <meta name="viewport">

  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">

   
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs">
  <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="intro" >

    <div ></div>

      <div >
        <div >
          <div  style="border: 1px solid red">

            <div >
              <nav id="sidebar"  !important>
                <div >
                  <a href="#Anasayfa"  style="background-image: url(images/logo.jpg);"></a>
                  <ul >

                    <a href="#Anasayfa">Ana Sayfa</a>
                    <ul id="AnaSayfa">

                    </ul>

                    <li>
                      <a href="#satisnoktalari">Satış Noktaları</a>
                    </li>
                    <li>
                      <a href="#Teknikozellikler">Teknik Özellikler</a>
                      <ul id="TeknikÖzellikler">

                      </ul>
                    </li>
                    <li>
                      <a href="#hakkinda">Hakkında</a>
                    </li>

                  </ul>

                  <div >



                    <p>
                      Sipariş:0(325)435 80 93
                      Kurumsal:0(850)288 44 78
                      Fax:0(328)578 00 54


                    </p>


                    <p>Gazi Mah. Çıkmaz Sk. ÇANKAYA/ANKARA</p>
                  </div>

                </div>


              </nav>


            </div>
          </div>


           <div >
             <div  style="border: 1px solid red">


               <h2 >HAKKINDA</h2>

               <p >
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                id est
                laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                labore et
                dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                id est
                laborum.
               </p>
             </div>


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

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

col classes need to be a direct child of the row class. You can't wrap it in a different class (with no row class). Your col-2 is under row, but col-10 isn't. Swap the 2nd wrapper and the col-10 classes. Your code will work.

Also, if you want a 2-10 column layout on all screens, you don't need col-xs-2 col-sm-2 col-md-2 col-lg-2 & col-xs-10 col-sm-10 col-md-10 col-lg-10. Writing just col-2 and col-10 will work. It'll take the 2-10 layout on all screen sizes.

body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  background: #fafafa;
  color: gray; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  color: #f8b739; }
  a:hover, a:focus {
    text-decoration: none !important;
    outline: none !important;
    -webkit-box-shadow: none;
    box-shadow: none; }

button {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  button:hover, button:focus {
    text-decoration: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important; }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  line-height: 1.5;
  font-weight: 400;
  font-family: "Poppins", Arial, sans-serif;
  color: #000; }

.ftco-section {
  padding: 7em 0; }

.ftco-no-pt {
  padding-top: 0; }

.ftco-no-pb {
  padding-bottom: 0; }

.heading-section {
  font-size: 28px;
  color: #000; }
  .heading-section small {
    font-size: 18px; }

.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; 

}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }

.navbar-btn {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important;
  border: none; }

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0; }

.wrapper {
  width: 100%; }

#sidebar {
  min-width: 175px;
  max-width: 250px;
  background: #1d1919;
  color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  #sidebar.active {
    margin-left: -300px; }
  #sidebar .logo {
    display: block;
    width: 175px;
    height: 175px;
    margin: 0 auto; }
    #sidebar .logo span {
      display: block; }
  #sidebar ul.components {
    padding: 0; }
  #sidebar ul li {
    font-size: 16px; }
    #sidebar ul li > ul {
      margin-left: 10px; }
      #sidebar ul li > ul li {
        font-size: 14px; }
    #sidebar ul li a {
      padding: 10px 0;
      display: block;
      color: rgba(255, 255, 255, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
      #sidebar ul li a:hover {
        color: #f8b739; }
    #sidebar ul li.active > a {
      background: transparent;
      color: #f8b739; }
  @media (max-width: 991.98px) {
    #sidebar {
      margin-left: -200px; }
      #sidebar.active {
        margin-left: 0; } }

a[data-toggle="collapse"] {
  position: relative; }

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }




.btn.btn-primary {
  background: #f8b739;
  border-color: #f8b739; }
  .btn.btn-primary:hover, .btn.btn-primary:focus {
    background: #f8b739 !important;
    border-color: #f8b739 !important; }

.footer p {
  color: rgba(255, 255, 255, 0.5); }

  
h2.headertext {
  text-align: center;
}



body, html {
  height: 100%;
}


html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("./images/backgr.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<!doctype html>
<html lang="en">

<head>
  <title>Çakır</title>
  <meta charset="utf-8">
  <meta name="viewport">

  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">

   
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs">
  <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="intro" >

    <div ></div>

      <div >
        <div >
          <div  style="border: 1px solid red">

            <div >
              <nav id="sidebar"  !important>
                <div >
                  <a href="#Anasayfa"  style="background-image: url(images/logo.jpg);"></a>
                  <ul >

                    <a href="#Anasayfa">Ana Sayfa</a>
                    <ul id="AnaSayfa">

                    </ul>

                    <li>
                      <a href="#satisnoktalari">Satış Noktaları</a>
                    </li>
                    <li>
                      <a href="#Teknikozellikler">Teknik Özellikler</a>
                      <ul id="TeknikÖzellikler">

                      </ul>
                    </li>
                    <li>
                      <a href="#hakkinda">Hakkında</a>
                    </li>

                  </ul>

                  <div >



                    <p>
                      Sipariş:0(325)435 80 93
                      Kurumsal:0(850)288 44 78
                      Fax:0(328)578 00 54


                    </p>


                    <p>Gazi Mah. Çıkmaz Sk. ÇANKAYA/ANKARA</p>
                  </div>

                </div>


              </nav>


            </div>
          </div>


             <div  style="border: 1px solid red">
           <div >


               <h2 >HAKKINDA</h2>

               <p >
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                id est
                laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                labore et
                dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                id est
                laborum.
               </p>
             </div>


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

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Page link：https//www.codepudding.com/Mobile/247516.html

Prev:Boostrap 4 sticky sidebar not working and scrolls with page
Next:Chess Table Spacing - HTML,CSS , JS
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding