locked
How to make a div center in Bootstrap3? RRS feed

  • Question

  • User264732274 posted

    just read this article http://victorshi.com/blog/post/How-to-make-a-div-center-in-Bootstrap3

    it come with some solution to make a div appear center of page but their offset logic is not clear to me.

    their code

    <div class="row">
       <div class="col-lg-6 col-lg-offset-3 text-center">center</div>
    </div>

    what is the meaning of col-lg-offset-3 ?

    why they said So for example, a column of size 6 would be centred by adding an offset of 3, that's (12-6)/2.

    why the calculation is (12-6)/2 ?

    please help me to understand their calculation and also guide me what offset does here ?

    thanks

    Wednesday, December 7, 2016 12:38 PM

Answers

  • User475983607 posted

    Well, the total width is 12 units.  If the cell is 6 units and the offset is 3 units then 3 + 6 = 9  which leaves 3 units 12 - 9 = 3. Therefore, the 6 unit cell width is centered... ie. 3 + 6 + 3.

    This function is simply another way to figure out the same thing; (12-6)/2.  This means take away 6 units from 12.  That leaves use 6. then divide by 2 that gives us the two outside widths.  This is really just basic math.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2016 12:55 PM
  • User475983607 posted

    what offset col-lg-offset-3 does ?

    It offsets a cell by 3 units to the right.  If you want to know specifics of how it is done then read the CSS.  It's open source.

    if i need to add 6 then i can use col-lg-9 instead of col-lg-6....am i right ?

    I have no idea what you're asking.  At this point, it seems that you're are asking for help with rudimentary math?

    why should i use offset ?

    please tell me in what kind of situation people work with bootstrap offset class ?

    For one, to center a cell as outline in your original post!

    help me to understand with easy example code for offset use.

    The offset CSS is like a tool that you have in your toolbox and you can use this tool when you see fit.  

    Keep in mind, this is a support forum not your personal tutor.  If you want to know more about how offset works, I suggest that you build a simple test page and experiment. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2016 4:14 PM

All replies

  • User475983607 posted

    Well, the total width is 12 units.  If the cell is 6 units and the offset is 3 units then 3 + 6 = 9  which leaves 3 units 12 - 9 = 3. Therefore, the 6 unit cell width is centered... ie. 3 + 6 + 3.

    This function is simply another way to figure out the same thing; (12-6)/2.  This means take away 6 units from 12.  That leaves use 6. then divide by 2 that gives us the two outside widths.  This is really just basic math.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2016 12:55 PM
  • User264732274 posted


    what offset col-lg-offset-3 does ?

    u said  If the cell is 6 units and the offset is 3 units then 3 + 6 = 9

    if i need to add 6 then i can use col-lg-9 instead of col-lg-6....am i right ?

    why should i use offset ?

    please tell me in what kind of situation people work with bootstrap offset class ?

    help me to understand with easy example code for offset use.

    thanks

    Wednesday, December 7, 2016 2:38 PM
  • User475983607 posted

    what offset col-lg-offset-3 does ?

    It offsets a cell by 3 units to the right.  If you want to know specifics of how it is done then read the CSS.  It's open source.

    if i need to add 6 then i can use col-lg-9 instead of col-lg-6....am i right ?

    I have no idea what you're asking.  At this point, it seems that you're are asking for help with rudimentary math?

    why should i use offset ?

    please tell me in what kind of situation people work with bootstrap offset class ?

    For one, to center a cell as outline in your original post!

    help me to understand with easy example code for offset use.

    The offset CSS is like a tool that you have in your toolbox and you can use this tool when you see fit.  

    Keep in mind, this is a support forum not your personal tutor.  If you want to know more about how offset works, I suggest that you build a simple test page and experiment. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2016 4:14 PM