Webdesign using Bootstrap 4 – Part 1

Bootstrap is a free front-end framework for faster and easier web development Bootstrap also gives you the ability to easily create responsive designs Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins These line of code will enable bootstrap4 jumbotron text-center is used to center the text and background color to #e9ecef; Advantages of Bootstrap: Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera) Check the bottom left corner ,the output shown in the firefox browser. To ensure proper rendering and touch zooming, add the followingtag inside theelement:Bootstrap 4 also requires a containing element to wrap site contents. The .container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport Bootstrap framework is using css class ,so we need to know the class used in bootstrap. bootstrap uses 12 column grid,we can arrange the column by calculating eg.if you want 2 col then you can assign first col with column first as col-sm-6 and second column with col-sm-6 means 6+6=12 ,or you can arrange col-sm-8 and col-sm-4(12-8=4) Please compare with output shown in firefox Resizing the browser is for changing the device screen size. Bootstrap 4 grid system has five classes .col- (extra small devices – screen width less than 576px) .col-sm- (small devices – screen width equal to or greater than 576px) .col-md- (medium devices – screen width equal to or greater than 768px) .col-lg- (large devices – screen width equal to or greater than 992px) .col-xl- (xlarge devices – screen width equal to or greater than 1200px) The classes above can be combined to create more dynamic and flexible layouts.

Add a Comment

Your email address will not be published. Required fields are marked *