How to make Twitter bootstrap modal full screen

by

I achieved this in Bootstrap 3 with the following code: 

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

In general, when you have questions about spacing / padding issues, try right+clicking (or cmd+clicking on mac) the element and select “inspect element” on Chrome or “inspect element with firebug” on Firefox. Try selecting different HTML elements in the “elements” panel and editing the CSS on the right in real-time until you get the padding / spacing you want.

Here is a live demo

Here is a link to the fiddle

More Related Contents:

  1. How can I make Bootstrap columns all the same height?
  2. Bootstrap dropdown sub menu missing
  3. Center content in responsive bootstrap navbar
  4. Order columns through Bootstrap4
  5. Center an element in Bootstrap Navbar
  6. Flushing footer to bottom of the page, twitter bootstrap
  7. How to overwrite styling in Twitter Bootstrap
  8. Applying CSS styles only to certain elements
  9. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  10. Bootstrap icons are loaded locally but not when online
  11. Bootstrap xs columns wrap
  12. Bootstrap 3 – desktop view on a mobile device
  13. Customize Bootstrap 4’s grid-system Breakpoints
  14. Prevent flex item from exceeding parent height and make scroll bar work
  15. Bootstrap Element 100% Width
  16. css framework for an app with existing stylesheet
  17. Bootstrap: align input with button
  18. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  19. How to use the new affix plugin in twitter’s bootstrap 2.1.0?
  20. Nested rows with bootstrap grid system?
  21. Django Forms and Bootstrap – CSS classes and
  22. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  23. Centering the image in Bootstrap
  24. LESS mixin a variable class name
  25. Bootstrap Responsive Text Size [duplicate]
  26. css to make bootstrap navbar transparent
  27. How do I make card-columns order horizontally?
  28. Scope Bootstrap Css in Vue
  29. Bootstrap Grid System new line does not look nice
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment