What Exactly Is Offset In Bootstrap? [duplicate] - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs What exactly is offset in bootstrap? [duplicate] Ask Question Asked 8 years, 4 months ago Modified 5 years, 2 months ago Viewed 88k times 23 This question already has an answer here: What is the use of the offset in the bootstrap? (1 answer) Closed 8 years ago.

I do understand what is grid, basically one whole row will have 12 spaces.

<div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div>

Basically what the code above is just dividing the spaces into 3 section but what I don't understand is, whats the point of setting offset?

<div class="col-lg-6 col-md-offset-3"></div>

• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 1, 2019 at 14:41 CroMagnon 1,20877 gold badges2121 silver badges3232 bronze badges asked Aug 2, 2016 at 9:15 sinusGobsinusGob 4,2931414 gold badges4949 silver badges8686 bronze badges 2

• It just adds space before your column – Aziz Commented Aug 2, 2016 at 9:16
• getbootstrap.com/css/#grid-offsetting – C3roe Commented Aug 2, 2016 at 9:17

Add a comment |

2 Answers 2

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 53

Offsets are used for spacing elements in the responsive grid.

The unit is based on the column layout.

You can define an offset this way : col-[breakpoint]-offset-[number of colums]

In this example, admitting our layout is made of 12 columns :

<div class="row"> <div class="col-md-6 col-md-offset-3"> <p>test</p> </div> </div>

Means that in the medium range of the grid system, the element will have a width of 6 colums and there will be 3 blank columns before the element (and as a consequence, will have 3 blank colums after).

The result of this is a div of 6 colums width, centered in the container.

There is a example showing how it renders in the Bootstrap documentation. https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns

Share Improve this answer Follow edited Oct 11, 2019 at 11:06 answered Aug 2, 2016 at 9:38 MAdEfACrMAdEfACr 73377 silver badges1313 bronze badges 5

• Awesome answer, now i get it! – sinusGob Commented Aug 2, 2016 at 9:46
• What I don't get is how the above example adds up to 12 columns? In other words, don't you have to be explicit about the 3 columns to the right? – Michael Ray Lovett Commented May 8, 2017 at 14:16
• Yes, you don't have to: 12 columns is the default configuration in Boostrap. If you configure an other layout (getbootstrap.com/docs/3.3/customize see @grid-columns param) the classes will behave accordingly. The 12 columns responsive grid is the most popular as it is the smallest multiple of 2,3 and 4. – MAdEfACr Commented Sep 29, 2017 at 8:26
• Is the point of offset so you don't have to add empty "spacer" divs to fill in the gaps? – Jarad Commented Mar 22, 2020 at 22:29
• Yes. Without offsets, you would probably end up having to add empty divs and set grid column classes on them. – MAdEfACr Commented Apr 26, 2020 at 8:41

Add a comment | 3

Offset means: Move columns to the right using the .col-md-offset-* classes. These classes increase the left margin of a column by * columns.

For example col-md-offset-3 increases the left margin by 3 for medium devices.

Share Improve this answer Follow edited Aug 2, 2016 at 10:40 Fairy 3,74022 gold badges2828 silver badges3636 bronze badges answered Aug 2, 2016 at 9:22 Prathabs DuraiPrathabs Durai 3122 bronze badges Add a comment |

Not the answer you're looking for? Browse other questions tagged

• css
• twitter-bootstrap

or ask your own question.

• The Overflow Blog
• Why do developers love clean code but hate writing documentation?
• This developer tool is 40 years old: can it be improved?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

4 What is the use of the offset in the bootstrap?

Related

1236 Center a column using Twitter Bootstrap 2003 Transitions on the CSS display property 2637 What is the difference between margin and padding in CSS? 1142 How can I make Bootstrap columns all the same height? 1120 In CSS Flexbox, why are there no "justify-items" and "justify-self" properties? 1251 How to make Twitter Bootstrap menu dropdown on hover rather than click 814 What is sr-only in Bootstrap 3? 968 vertical-align with Bootstrap 3 448 Is there a CSS selector for the first direct child only? 525 What is Bootstrap?

Hot Network Questions

• `\typeout` first n characters of a macro's argument in pdflatex
• Aligning domain model to data model. Is my data representation wrong?
• Answering student's question that is already in the upcoming exam
• PSE Advent Calendar 2024 (Day 20): Holly
• How Circe cleaned Jason and Medea from ​the guilt for the murder?
• Help in identifying this dot-sized insect crawling on my bed
• Short story about a city enclosed in an electromagnetic field
• Why is my LED burning out?
• Exploiting MSE for fast search
• Auto-configuring Global Unicast address with prefixed other than 64-bits len
• Under epistemological pluralism, how can one determine the most suitable epistemology to apply in a given context?
• Why do many PhD application sites for US universities prevent recommenders from updating recommendation letters, even before the application deadline?
• Prove that the space of square integrable vector valued functions is separable
• Does a rise in hourly wage (not unearned income) have an income effect, or just a substitution effect?
• Removing Matching Pixels?
• Is "Bich" really Latin for "generosity"?
• scp with sshpass does not work (with custom identity file and custom port)
• Why does each page of Talmud end with the first word of the next page?
• Merits of `cd && pwd` versus `dirname`
• Nut allergy and I need a substitution
• Why does ctldl.windowsupdate.com not use (valid) TLS?
• Why is Jesus called Prince of Peace and not King of Peace considering he was also called Eternal Father?
• C++ code reading from a text file, storing value in int, and outputting properly rounded float
• Bolt of rear derailleur rounded out and broke off - repair wire thread

more hot questions default