Journal of Information and Computational Science ISSN: 1548-7741

Bootstrap Responsive Web Designing-Very Easy and Efficient Designing Framework Learning Approach for Developing Responsive Website

Neha Upadhyay Mandsaur University, Mandsaur Neemuch Bye Pass Road, Mandsaur (M.P.) [email protected]

Abstract Bootstrap is a free and open source front-end web system for the planning website and web CSS is a straightforward style language meant to application. It contains HTML and CSS based alter the method of creating websites respectable. outline layouts. We can easily use: CSS is employed to outline designs for your sites, as well as the look, layout and variant in show for  Card design various devices and screen sizes. CSS is simple to  Matter find out and perceive, however it provides powerful  Sass with looping and condition management over the presentation of associate degree HTML document. Most typically, CSS is This paper will provide a summary of the latest combined with the markup languages HTML or developments in web design techniques and XHTML.This paper presents which CSS is best to technologies. In addition, the paper will discuss use and easy to understand. Many CSS are how these techniques can be used to make future available like CSS, CSS3 (media query, Bootstrap). maintenance and upgrades easier by fully You will get an introduction to the current full separating content from layout, using contextual featured of CSS and its framework. markup and creating websites that are accessible from the start and will not need extensive redesigns Keywords: HTML, CSS, CSS3, Bootstrap, later down the road. JavaScript Below figure is an example of a Bootstrap Image 1. Introduction Slide Show:

In the market, there are many CSS design platforms like CSS, CSS2, CSS3, (Booystrap, Media query) are there, but Bootstrap is one of the most popular web designing a framework. It is HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web which have a less coding language used to create a more responsive template, images, buttons, portfolios, sliders, Figure 1. Bootstrap Slider menus, etc.

Volume 10 Issue 2 - 2020 1046 www.joics.org Journal of Information and Computational Science ISSN: 1548-7741

1.1 Why use Bootstrap: Bootstrap is the most  Button Groups popular framework for creating layouts. It is one of  Navigation Bar the most effective CSS Framework, which is very  Dropdowns clean to analyse and recognize. It is a very foremost  Breadcrumbs framework for the new developers as they discover  Sliders it very smooth to use and understand. Here are  Alerts some additional reasons to use Bootstrap:  Carousel  Progress Bar  Bootstrap is responsive CSS adjusts to  And many others. desktops, mobiles and tablets, etc., which gives all screen resolution compatibility too. III. How to write a Bootstrap?  Mobile design is a part of the bootstrap framework. Basically Bootstrap is a framework which is being  Bootstrap is compatible with all browsers used by HTML to make web applications more (Chrome, Firefox, Internet Explorer, Safari, interactive. It will be interpreted and run on the and Opera) browser being used by the clients. The following are the few points to be recollected 1.2 Advantages of Bootstrap: at the same time as we are writing JavaScript instructions.They are as follows:  It’s have responsive structure and styles.  Some components have their javascript  First of all, you just have to download the behaviour incorporated into them already, zip files from bootstrap official website so you do not need to worry about trying to https://getbootstrap.com/ write the functionalities for it.  And after unzipping, include these files in the head of your HTML document. II. Components

Bootstrap has a lot of handy components, from which you can choose and easily integrate or modify to suit your needs as the case may be. Most of these components come with default breakpoints to cater for all screen widths. This can go a long way to help in fast prototyping; a navbar here, a jumbotron there, some forms and containers here and there and you are good to go. This example HTML document includes the The best part is that some components have their bootstrap framework with its default styling and javascript behaviour incorporated into them every single component and JavaScript plugins. already, so you do not need to worry about trying to write the functionalities for it. Some of the IV. Responsive Systems components are; Responsive Web design is the technique that shows that design and development have to reply to the

Volume 10 Issue 2 - 2020 1047 www.joics.org Journal of Information and Computational Science ISSN: 1548-7741

person’s behaviour and environment, it is totally components. The Flex Box Layout Module, based on screen resolution, platform and makes it less difficult to layout flexible, orientation. Responsive web design is a simple. It is responsive layout structure without the use about creating a website which modifies its layout of float or positioning. based on the size or media. V. Conclusion Nowadays an almost every new client needs a mobile model of their website. It’s essential after This paper will provide a summary of the latest all one design for the BlackBerry, another for the developments in web design techniques and iPhone, the iPad, netbook, Kindle and all screen technologies. In this paper, we have tried to clarify resolutions must be compatible too. The designer the Bootstrap framework. One of the biggest must maintain the same content in multiple screen. advantages we get Bootstrap framework is the It is simple to change the layout of a single website, depending on the screen resolution like Desktop, speed in which the code can be written. It helps to Tablet, Mobile and so on. make it very easy to keep the feel and look. It gives us an ability to create your own theme or website. Bootstrap is a framework which gives a responsive concept if utilized properly. It utilizes two VI. Reference responsive patterns and alternates them on its various components depending on which better. [1] Bootstrap framework, https://getbootstrap.com/

 Grid system: Bootstrap utilizes mobile-first [2] Stewart Baker, “Making It Work for Everyone: flexbox grid and the twelve column's width HTML5 and CSS Level 3 for Responsive, system to build layouts of all shapes and Accessible Design on your Library ’s Website” sizes. It's responsiveness comes in five tiers Western Oregon University. or classes- -sm -md etc. Show in below table: [3] What does responsive web design? Retrieved from Table 1. Grid System https://www.ssbbartgroup.com/blog/2013/07/11/wh at-does-responsive-webdesign-have-to-do-with- Extra Small Medi Lar Extra small um ge Larg accessibility. e Contain None 540px 720 960 1140 er width (auto) px px px Class .col-xs .col- .col- .col- .col- sm- md- lg xl- No of 12 columns

 Flex system: Bootstrap uses flex system to quickly manage the layout, alignment, and sizing of grid columns, navigation,

Volume 10 Issue 2 - 2020 1048 www.joics.org