What’s new in Bootstrap v4.3 ?

Last Updated : 31 Oct, 2019

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

size mixins

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= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
  
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </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> 