How To Change Bootstrap Column Width To Another Size Responsively?

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 How to change Bootstrap column width to another size responsively? Ask Question Asked 7 years, 9 months ago Modified 7 years, 9 months ago Viewed 4k times 0

So basically I have something like

<div class="col-xs-3"> stuff </div>

and I want it to change to something like

<div class="col-xs-8 col-xs-offset-2"> stuff </div

So I essentially want to take a div that's placed on the left and move it to the center and widen the column size when the viewport width is <768px. How can I do this?

• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Apr 8, 2017 at 18:37 danyeoldanyeol 311 silver badge33 bronze badges Add a comment |

1 Answer 1

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

Check the grid documentation from their site.

You can define multiple classes for the different breakpoints. If I understand you correctly you need something like this:

<div class="col-sm-3 col-xs-8 col-xs-offset-2">stuff</div>

This translates to: 3 columns on small devices (>= 768px) and 8 columns + 2 offset columns for extra small devices (< 768px). They also have col-md and col-lg- classes.

Share Improve this answer Follow answered Apr 8, 2017 at 18:45 Raul ReneRaul Rene 10.3k99 gold badges5454 silver badges7777 bronze badges 1

• 1 Totally skipped that part where you can assign two column sizes. For my actual code I used <div class="col-sm-3 col-xs-6"> and that worked how I originally wanted it to be. Thanks! – danyeol Commented Apr 8, 2017 at 19:48

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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

• html
• css
• twitter-bootstrap

or ask your own question.

• The Overflow Blog
• How AI apps are like Google Search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

1 Customizing bootstrap - how to change the number of columns under a certain width? 11 How to change bootstrap columns width 0 Bootstrap column width 0 how to change bootstrap columns while width is 320 0 What is the correct way to adjust bootstrap columns to specified widths 1 html : set column width 4 Custom column size on bootstrap (without affect responsive design) 0 Responsive columns in bootstrap 0 Automatically adjust column width in bootstrap 0 How to modify width in bootstrap

Hot Network Questions

• Tikz vphantom/hphantom for whole node/scope
• What is this FreeDOS kernel loader found on the “W3x4NTFS” disk image?
• 3 phase asynchronous motors in tandem
• What to do about potential employers requesting academic documents that would reveal my age?
• Manathermy: effects on the ecosystem
• How to do the opposite of shift in zsh?
• Should I include my legal name on my CV if my preferred name is not reflected on my diplomas? -- Humanities
• Hebrews 2:11 - If we are brothers of Jesus and share in our Father's inheritance, and Jesus is God, does that imply we also are God?
• Change of Measure in the Heston Model Using Girsanov's Theorem
• writing two matrices in a clear and nice way
• Free Kei Friday
• Algebraic equation to represent a triangle.
• Download a file with SSH/SCP, tar it inline and pipe it to openssl
• Are their any advanatges of a lower value of a loss function?
• What builds a nest or storage structure in the shoe?
• Is "Klassenarbeitsangst" a real word? Does it accord with general rules of compound noun formation?
• How do I recreate these shooting stars?
• Publication in a journal that has now disappeared entirely. Can I publish the paper elsewhere?
• How to swim while carrying fins (i.e., when the fins aren't positioned on my feet)?
• How many hours of daylight can a planet in an elliptical orbit receive?
• Preventing icing in below zero Celcius conditions during taxiing
• Growing plants on mars to increase the oxygen level
• Why did the golden eagle attack Dirk Gently?
• Colombian passport expires in 5 months

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html