https://training-course-material.com/index.php?action=history&feed=atom&title=Bootstrap_3_vs_4Bootstrap 3 vs 4 - Revision history2026-05-14T01:15:29ZRevision history for this page on the wikiMediaWiki 1.45.1https://training-course-material.com/index.php?title=Bootstrap_3_vs_4&diff=66192&oldid=prevLsokolowski at 05:43, 13 April 20182018-04-13T05:43:29Z<p></p>
<p><b>New page</b></p><div>[[Category:Bootstrap]]<br />
<br />
<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" ><br />
;title: Bootstrap 3 vs. 4<br />
;author: Lukasz Sokolowski<br />
</slideshow><br />
<br />
== Intro ⌘==<br />
At the stage of HTML coding:<br />
* it is always important to have at hand a good tool that will greatly accelerate the development process<br />
* It should be flexible, easily customizable and will allow you to easily create mockups<br />
* It should allow you to easily create pages that are well displayed on desktops and mobile devices<br />
<br />
== Bootstrap ⌘==<br />
A powerful CSS framework for creating adaptive pages that includes:<br />
* multiple-column adaptive grid<br />
* ready-made elements by type of navigation, buttons, dropdowns, etc<br />
* set of service classes for controlling the behavior of elements<br />
* reset or normalize<br />
* set up the typography in the template<br />
* mediaobjects<br />
* Some JS-plugins (Carousel, Modal and so on)<br />
* and much more<br />
<br />
== B3 vs B4 ⌘==<br />
<br />
* Almost identical set of components and utilities<br />
* But there are a lot of differences<br />
<br />
=== Sass vs Less ⌘===<br />
<br />
Source code for Bootstrap 4 uses Sass, Bootstrap 3 – Less <br />
* Sass is recognized as the most widely used CSS preprocessor<br />
* The code written on it is more readable and understandable<br />
* Functional is slightly better than competitors<br />
<br />
=== Flexbox vs Floats ⌘===<br />
<br />
* In the 4th version you have no problem aligning vertically and the problem of columns of the same height<br />
* Change the vertical and horizontal alignment on different devices using utilities and classes, such as: align-item-center, align-items-md-center, align-items-lg-start, and so on<br />
* Change the order of your columns using flex-unordered, flex-last, flex-first<br />
* Use mr-auto, ml-auto, which will align your element to the right or left<br />
* Live example <br />
** http://demo.tutorialzine.com/2016/11/boostrap-4-regular-vs-flex-grid/?1-basic-grid<br />
<br />
=== Responsive columns ⌘===<br />
* Columns of the same width without specifying the explicitly labeled class numbers<br />
** Inside your row just place as many “div” with the class col as you need and they will have the same width<br />
** The result is 3 columns of the same width on all devices (there was no such possibility in the 3rd version)<br />
<br />
<syntaxhighlight lang="html"><br />
<div class="row"><br />
<div class="col">1</div><br />
<div class="col">2</div><br />
<div class="col">3</div><br />
</div><br />
</syntaxhighlight><br />
<br />
=== Responsive columns Con't ⌘===<br />
[[File:BootstrapCols.jpg]]<br />
<br />
=== Responsive con't ⌘===<br />
<br />
* It is possible to create columns that change their width depending on the content<br />
* To do this, you need to use the following class <br />
** col-md-auto (instead of md substitute the another breakpoint)<br />
<br />
=== Media queries ⌘===<br />
<br />
We have the opportunity to more flexible approach to changes styles of the page on various devices<br />
* in the grid system there are the following breakpoints:<br />
extra large (>= 1200px) <br />
large (>= 992px) <br />
medium (>= 768px) <br />
sm (>= 576px) <br />
xs (< 576px) <br />
* In the B3 of these breakpoints there were only 4<br />
** this sometimes created some problems when marking on small tablets and phones with a big screen<br />
<br />
=== Flexible Con't ⌘===<br />
<br />
* Not all elements in Bootstrap 4 have '''display: flex''' property<br />
* If you need to make a 'flex' element, then you should use the ''display'' utility<br />
** For example, add a class '''.d-flex''', '''.d-inline-flex''', or '''.d-sm-flex''', when you need to apply the utility only for devices of the sm category and above<br />
* For an item with the '''.d-flex''' class, there is a set of flex utilities with which<br />
** you can change the axis of the container,<br />
** reverse the order,<br />
** align elements inside the container, and so on. <br />
** these include: flex-row, flex-row-reverse, .flex-column, .flex-column-reverse, .flex-sm-row, .justify-content-start, .justify-content-start, .justify-content-sm-start and other variations<br />
<br />
=== Typography ⌘===<br />
<br />
The section of the typographies have improved indentation system for different elements (p, ul, etc.)<br />
<br />
== Migration to B4 ⌘==<br />
<br />
* Official docs<br />
** https://getbootstrap.com/docs/4.0/migration/<br />
* Converting<br />
** One of many available exmaples<br />
*** http://upgrade-bootstrap.bootply.com/</div>Lsokolowski