-1

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

Azazel
  • 573
  • 3
  • 10
  • 23
  • 1
    How about an invisible `div` on those grids? just make a `
    ` with an items inside and set `display: hidden` in CSS?
     –  Dec 07 '19 at 04:26
  • 1
    @AegirAideron Hey that worked. Instead of doing display: hidden, I used class = "hidden" and this worked also just fine! Thank you for helping me out. After looking up on your set of example. Here is the resource where I found more information about display settings https://www.w3schools.com/css/css_display_visibility.asp. – Azazel Dec 07 '19 at 04:52

3 Answers3

1

You need to offset your columns: offset-sm-3 is specifing leave 1 of 4 empty

Use

<div class="container">
  <div class="row">
    <div class="col-sm-3 offset-sm-3">Picture</div>
    <div class="col-sm-3">Bullets</div>
  </div>
</div>
Gabriel Vasile
  • 2,110
  • 1
  • 14
  • 26
0
<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>
Sunny Kumar
  • 823
  • 6
  • 14
  • Similar answer to @Aegir Aideron. display hidden worked perfectly for me! Thanks for the tip! Also class = "hidden" works too! – Azazel Dec 07 '19 at 04:56
0

Try to use offset while creating the grid use offset class which will help you align your col in center :

Documentation

<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 ">.col-md-3 .offset-md-3</div>
</div>
Abhishek Pakhare
  • 476
  • 1
  • 4
  • 15