What’s new in Bootstrap v4.3 ?
The front end web development track consists of several languages, frameworks, and libraries. HTML, CSS, JavaScript, jQuery, AngularJS, ReactJS, VueJS, Bootstrap are some of those. These are some of the technologies that a developer must know in order to make beautiful, responsive, and functional websites and web applications.
Bootstrap is an open-source framework, built on HTML, CSS, Less(v3), Sass(v4), and JavaScript. Bootstrap was first released in 2011. It was developed to make the front end development easy. Using Bootstrap, one can create functionalities like the carousel, cards, etc fairly quickly and easily. Without Bootstrap, it would’ve required a lot of coding. Another advantage of using Bootstrap is that it makes the whole website device responsive. This means that the website will look good on every device, irrespective of the screen size, operating system, or device type(smartphone, tablet, laptop, feature phone, etc).
The latest version Bootstrap version v4.3.1 was released is February 2019.
Let’s have a look at the new features this new version has to offer.
- .rounded-sm and .rounded-lg has been added for the small and large border-radius.
- .modal-dialog-scrollable modifier class has been added for scrolling the content inside a modal.
- .list-group-horizontal modifier classes has been added. These are used for displaying the list groups as a horizontal row.
- The .text-break has been newly introduced for applying word breaks in the paragraph.
- .rounded-sm and .rounded-lg for applying border radius to the divisions.
- .modal-dialog-scrollable enables scrolling within a given modal. This allows more data to be entered into the modal box, without having to worry about the paragraph size.
- .list-group-horizontal modifier classes has been added. It displays the list groups as a horizontal row.
Improvements in the new version
- There used to be some variables that used to inherit their values from either the parent or some other element. The inherent values have been set to null for those elements and will remain so until modified personally by the user.
- The focus style of the badges now matches their background color.
Deprecated:
- img-retina, invisible, float, and size mixins properties have been deprecated in the v4.3, and will be completely removed from v5.0 onwards.
Example of scrollable dialog box
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Images</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script> </head> <body style="text-align:center;"> <h4 class="m-3">Scrollable Dialog Box - Bootstrap v4.3</h4> <!-- Button trigger modal --> <button type="button" class="btn btn-primary mx-4" data-toggle="modal" data-target="#exampleModalScrollable"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content" style="overflow:initial;"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle"> Modal title </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body position-static"> Computer Science is the study of computers and computational systems. Unlike electrical and computer engineers, computer scientists deal mostly with software and software systems; this includes their theory, design, development, and application. <br> <br> Principal areas of study within Computer Science include artificial intelligence, computer systems and networks, security, database systems, human computer interaction, vision and graphics, numerical analysis, programming languages, software engineering, bioinformatics and theory of computing. <br> <br> Although knowing how to program is essential to the study of computer science, it is only one element of the field. Computer scientists design and analyze algorithms to solve programs and study the performance of computer hardware and software. The problems that computer scientists encounter range from the abstract-- determining what problems can be solved with computers and the complexity of the algorithms that solve them – to the tangible – designing applications that perform well on handheld devices, that are easy to use, and that uphold security measures. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div> </div> </body> </html> |
Output
Please Login to comment...