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.

  1. .rounded-sm and .rounded-lg has been added for the small and large border-radius.
  2. .modal-dialog-scrollable modifier class has been added for scrolling the content inside a modal.
  3. .list-group-horizontal modifier classes has been added. These are used for displaying the list groups as a horizontal row.
  4. The .text-break has been newly introduced for applying word breaks in the paragraph.
  5. .rounded-sm and .rounded-lg for applying border radius to the divisions.
  6. .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.
  7. .list-group-horizontal modifier classes has been added. It displays the list groups as a horizontal row.

Improvements in the new version

  1. 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.
  2. 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.