I can't position elements in same line with bootstrap

user_6332415 0
Viewed 66

I have been trying for a while to align some elements on the same line, I have tried using bootstrap and flexbox, On each attempt, I get different results, but I can't seem to achieve what Im looking for. See image attached for what im trying to do. example Also, the idea is that when the screen is smaller, to scale down to continue fitting on the same line without breaking to the next line.

Thanks in advance!

#subject-bar-container {
 background-color: #2c2c2c !important;
 border-top: 1px solid white;
 width: 100%
}

#subject-bar {
 width: 12em;
 height: 5em;
 color: white;
 font-weight: lighter;
 background-color: blue;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all .2s ease-in-out;
 margin: 5px;
}

#subject-bar:hover {
 transform: scale(1.02);
}

a:hover {
 text-decoration: none !important;
}

.math {
 background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
 background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
 background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
 background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
 background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
 background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}
<!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

flexbox bootstrap-4 css html
3 Answers

You can achieve this using css flecbox check my code sample below.

#subject-bar-container {
    background-color: #2c2c2c !important;
    border-top: 1px solid white;
    width: 100%;
}

#subject-bar {
    width: 12em;
    height: 5em;
    color: white;
    font-weight: lighter;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in-out;
    margin: 5px;
}

#subject-bar:hover {
    transform: scale(1.02);
}

a:hover {
    text-decoration: none !important;
}

.math {
    background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
    background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
    background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
    background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
    background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
    background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}

ul{
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
  /*overflow:hidden;*/
}
<!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

I hope this will help you. If you just want to get more advance in Web development, please kindly check out my Web Programming Course

user_124947070

You just needed to display a few things as flex and turn your overflow to hidden so that it will shrink. See what I did here. All I did was add this code your CSS

   .row ul * {
      display:flex;
      overflow: hidden;
    }

    ul{
      display:flex;
      justify-content:space-between;
      padding:0;
      margin:0;
    }

And the final result is this, here's the jsfiddle so you can play with the screen size: https://jsfiddle.net/p3z8tq4r/

#subject-bar-container {
 background-color: #2c2c2c !important;
 border-top: 1px solid white;
 width: 100%
}

#subject-bar {
 width: 12em;
 height: 5em;
 color: white;
 font-weight: lighter;
 background-color: blue;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all .2s ease-in-out;
 margin: 5px;
}

#subject-bar:hover {
 transform: scale(1.02);
}

a:hover {
 text-decoration: none !important;
}

.math {
 background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
 background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
 background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
 background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
 background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
 background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}


.row ul * {
  display:flex;
  overflow: hidden;
}

ul{
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
}
<div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

user_111111190

This May work as per your requirements : I've Removed Your Style, col-lg and all those links are embeded into another div with class col-sm-2 due to this it will be also responsible for small screen sizes and in addition to that I've included css for ul. due to this all those links remain in the same line even after you change the screen size. You can know more about css flex at : https://www.w3schools.com/css/css3_flexbox.asp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
      #subject-bar-container {
        background-color: #2c2c2c !important;
        border-top: 1px solid white;
        width: 100%;
      }

      #subject-bar {
        width: 12em;
        height: 5em;
        color: white;
        font-weight: lighter;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.2s ease-in-out;
        margin: 5px;
      }
      .col-sm-2 {
        padding: 0;
      }
      #subject-bar:hover {
        transform: scale(1.02);
      }

      a:hover {
        text-decoration: none !important;
      }

      .math {
        background-image: linear-gradient(to bottom left, #0c144e, #6565b9);
      }

      .science {
        background-image: linear-gradient(to bottom left, #3c0c4e, #af65b9);
      }

      .history {
        background-image: linear-gradient(to bottom left, #4e4e0c, #b9b665);
      }

      .art {
        background-image: linear-gradient(to bottom left, #4e300c, #b99965);
      }

      .literature {
        background-image: linear-gradient(to bottom left, #205259, #4b9d90);
      }

      .music {
        background-image: linear-gradient(to bottom left, #0c325f, #60a6b7);
      }
      .row ul * {
        display: flex;
        overflow: hidden;
      }

      ul {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
      <div class="row">
        <ul>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="math">Mathematics</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="science">Science</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="history">History</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="art">Art</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="literature">Literature</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="music">Music</li>
            </a>
          </div>
        </ul>
      </div>
    </div>
  </body>
</html>
user_71143900
Related