How to use bootstrap with 16 or 24 columns

by

This method is for an older version of Bootstrap – Version 2.3.1

Click this link to customize bootstrap: http://twitter.github.com/bootstrap/customize.html

You will find examples such as this. Change the parameters to fit your needs.

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px

More Related Contents:

  1. Twitter Bootstrap Customization Best Practices [closed]
  2. How to namespace Twitter Bootstrap so styles don’t conflict
  3. Prefixing all selectors for twitter bootstrap in less
  4. My Bootstrap Window Became to large?
  5. Bootstrap Rows and Columns – Do I need to use row?
  6. How to dismiss a Twitter Bootstrap popover by clicking outside?
  7. Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
  8. Bootstrap: Collapse other sections when one is expanded
  9. Updating Bootstrap to version 3 – what do I have to do?
  10. Bootstrap – row can I have columns add up to more then 12?
  11. Bootstrap tooltips not working
  12. Wrapping bootstrap columns in extra div
  13. How to create new breakpoints in bootstrap 4 using CDN?
  14. How to use CKEditor in a Bootstrap Modal?
  15. BootStrap3 keep the dropdown menu open after click on the item
  16. Should I use Bootstrap from CDN or make a copy on my server?
  17. How to include bootstrap css and js in reactjs app?
  18. Bootstrap combining rows (rowspan)
  19. Angular 4: How to include Bootstrap?
  20. Change the background color in a twitter bootstrap modal?
  21. What’s the tabindex=”-1″ in bootstrap for
  22. Twitter Bootstrap modal blocks text input field
  23. Different slide duration for each item on bootstrap 3.1 carousel
  24. Bootstrap – I don’t want columns to have the same height
  25. Is there a hosted version of Twitter Bootstrap? [closed]
  26. Binding to Collapse event in Twitter Bootstrap 3
  27. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  28. How can I change the speed of the fade for alert messages in Twitter Bootstrap?
  29. What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?
  30. keep the current tab active with twitter bootstrap after a page reload?

Leave a Comment