Layout issues after migrating Bootstrap 3 to 4 (table width,

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Layout issues after migrating Bootstrap 3 to 4 (table width, elements inline not vertically stacked)

lneville asked 5 years ago

I have migrated a simple site from Bootstrap 3.2.0 to 4.3.1 (using bootstrap.min.css and bootstrap.bundle.min.js). Both before and after the site uses jQuery 3.2.1.

I converted the nav menu to fit with the new Bootstrap 4 design, wrapped the header and main content in Header and Main elements, and swapped all Glyphicon references to FontAwesome, but other than that the HTML remains the same.

I now have 2 major layout issues:

  1. A table (used to display a grid of data) now has an automatic width of 407px, despite being told in CSS to be 100%. Under Bootstrap 3 it had an automatic width of 1140px (on a desktop display) while also being 100% in CSS. In other words, the table now "shrinks to fit" rather than expanding to fill available space.
  2. There is an H1 heading and a button above the table. They now align horizontally rather then stack vertically.

I did read the documented migration guidance, but I couldn't see anything there that told me why I get the above behaviour.

Bootstrap 3: enter image description here

Bootstrap 4: enter image description here

Marta Szymanska staff pro premium answered 5 years ago

Hi,

would you show me any demo of your website? Please, paste here a link. I'll try to help you.

Best, Marta

lneville commented 5 years ago

Thanks for the offer, but its a site in development on my PC and I don't have permission to make it public. I tried to show some relevant HTML in the screen shots ... I can share some more if there is something that would help, but not the whole site. Thanks!

Marta Szymanska staff pro premium commented 5 years ago

Hi,

I would like to help you but it is hard when I can not see your code. Especially when you are asking about Bootstrap and we are specialists in our product - MDB Package. Just screenshots are not enough, I need to see any code to try to help you.

Best, Marta

lneville commented 5 years ago

Sorry Marta, I thought this was a general Bootstrap support site. Anyway, I figured out the issue in the end, and the answer is here: https://stackoverflow.com/questions/58472118/layout-issues-after-migrating-bootstrap-3-to-4-table-width-elements-inline-not.

Marta Szymanska staff pro premium commented 5 years ago

Hi,

OK, I understand.

Best, Marta
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes
Tags
table-bootstrap4
About author
lneville
5Support score
1Questions 0Answers
0Snippets likes 0Snippets