CODEWITHSUNDEEP
htmlcss
Marvin
Marvin

Reputation: 75

How to move elements in a bootstrap grid div

CSS:

  border: 5px solid red;
}

#menu li{
  font-size: 25px;
  display:inline;
}

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2" id="menu">
      <ul class ="Menuitems">
        <li>The Hub</li>
          <li>FAQ</li>
        </ul>
      </div>

I am attempting to move the text in the li tags to the centre of the div. I cannot figure out the CSS to do so and I don't wish to use "position relative" "top: 5px" because it is bad practise and will mess up the responsive design element of the project. Text align is also not possible as the div is not large when it is full screen, see code pen for information

https://codepen.io/mdot700/pen/bGEGwLa

Upvotes: 0

Views: 621

Answers (1)

Dannick Bedard
Dannick Bedard

Reputation: 402

Found this with bootstrap

Source : https://www.codeply.com/go/bp/6COUMfNrEU

<div class="d-flex">
  <ul class="list-inline mx-auto justify-content-center">
    <li class="list-block-item">Item 1</li>
    <li class="list-block-item">Item 2</li>
    <li class="list-block-item">Item 3</li>
    <li class="list-block-item">Item 4</li>
    <li class="list-block-item">Item 5</li>    
  </ul>
</div>

Upvotes: 1

Related Questions