Search code examples
htmlcsstwitter-bootstrapflexboxbootstrap-grid

Bootstrap Grid [2 items] in center

I'm making a website using bootstrap and this is a screenshot of the grid from w3schools.com. In my website, Instead of having my profile picture on the left 1 of 2 and a bullet list on the right side on 2 of 2.

I want my profile picture on 2 of 4 and a bullet list on 3 of 4 while leaving 1 of 4 and 4 of 4 empty. Just basically having two items more in the centered of the page.

How can I accomplish this task?

enter image description here

Solution 
  • <div class="row">
    <div class="col-sm-3" style="visibility:hidden"></div>
    <div class="col-sm-3" style="background-color:pink;">
      picture here    
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      bullets here   
    </div>
    <div class="col-sm-3" style="visibility:hidden"></div>
  </div>