BOOTSTRAP 4 INTERVIEW QUESTIONS ANSWERS [2019]

Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap 4 is completely free to download and use!

There are few reason why we choose Bootstrap for building websites

  • Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.
  • Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML
  • Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background. This is is covered in detail in the section Bootstrap Basic Structure

CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.

 

Components: Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.

JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.

Customize: You can customize Bootstrap’s components, LESS variables, and jQuery plugins to get your very own version.

  • <div class = "container">
       <div class = "row">
          <div class = "col-*-*"></div>
          <div class = "col-*-*"></div>      
       </div>
       
       <div class = "row">...</div>
    </div>
    <div class = "container">....

Bootstrap media object component provides an easy way to align text and media objects when presenting them alongside each other. It allows you to quickly and easily float media to the left and/or right of a content block. 

Only two classes are required: The wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.

Bootstrap provides classes that can be used when working with the img element and examples for opting images into responsive behavior and adds lightweight styles to them all classes.

    1. Responsive images
    2. Thumbnail
    3. Aligning Images
    4. Image Shapes & Corners.

The Bootstrap 4 image alignments are mainly used two classes there are .float-left, .float-right.

<img src=”image1.jpg” class=”rounded float-left” alt=”bootstrap 4 image”>

 

<img src=”images 2.jpg” class=”rounded float-right” alt=”bootstrap 4 image”>

You can use Bootstrap to render images with rounded corners or as a circle. This is achieved with the .rounded-* utility classes.

<img src=”image_1.png” class=”rounded” alt=”rounded image”>

<img src=”image_2.png” class=”rounded-circle” alt=”rounded-circle image”>

<img src=”image_3.png” class=”img-thumbnail” alt=”img-thumbnail image”>

<img src=”image_4.png” class=”rounded-top” alt=”rounded-top image”>

<img src=”image_5.png” class=”rounded-bottom” alt=”rounded-bottom image”>

<img src=”image_6.png” class=”rounded-0″ alt=”rounded-0 image”>

The Bootstrap 4 forms are textual form controls like <input>, <text area>, and <select> elements with class .form-control have a width of 100% by default. 

Horizontal form: Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.

 

Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls. For <legend> elements, you can use .col-form-legend to make them appear similar to regular <label> elements.

Form and Label Sizing: To Use .col-form-label-sm or .col-form-label-lg to your <label>s to correctly follow the size of .form-control-lg and .form-control-sm.

And so many forms is there Inline Forms, Help text & Disabled Forms, Readonly plain text, etc….

Bootstraps included navigation components list into “tabs” and navigation “pills”. To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.

The Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that you might want.

Bootstrap 4 navbars is a simple and powerful, responsive navigation header, the navbars. Includes branding, navigation, and other elements into a navigation header, including support for our collapse plugin.

A standard navigation bar is created with the .navbars class, followed by a responsive collapsing class { .navbars-expand-sm | -md |-lg | -xl  }.

Bootstrap 4 navbars is a simple and powerful, responsive navigation header, the navbars. Includes branding, navigation, and other elements into a navigation header, including support for our collapse plugin.

A standard navigation bar is created with the .navbars class, followed by a responsive collapsing class { .navbars-expand-sm | -md |-lg | -xl  }.

Bootstrap 4 provides an easy way to create a stylized alert message box with its alert component. Alerts are created with the .alert class, followed by one of the contextual classes .alert-primary, .alert-success, etc…

To create a bootstrap 4 badge, apply the .badge class, as well as one of the .badge-primary, .badge-secondary, etc…

Button Badges: Badges can be used as part of links or buttons to provide a counter.

 

<button type=”button” class=”btn btn-primary”> Tutorials <span class=”badge badge-light”>14</span> </button>

Contextual Badges: The contextual classes (.badge-*) to change the color of a badge.

<span class=”badge badge-default”>Default</span>

<span class=”badge badge-primary”>Primary</span> etc….

Pill Badges: Use the bootstrap 4 pill badges are add .badge-pill class to make the badges more round.

<span class=”badge badge-pill badge-default”>Default</span>

<span class=”badge badge-pill badge-primary”>Primary</span> etc….

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. 

A bootstrap card it includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Bootstrap 4 progress bars featuring support for stacked bars, animated backgrounds, and text labels. To create a default progress bar, add a .progress class to a container element and and the .progress-bar class to its child element.

Bootstrap 4 Pagination to indicate a series of related content exists across multiple pages. Add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>.

Quickly configuring the position of an elements are .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky. Mainly three positions are there.

Fixed top : <div class=”fixed-top”>…</div>

Fixed bottom : <div class=”fixed-bottom”>…</div>

Sticky top: Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS position: sticky, which is not fully supported in all browsers.

Microsoft Edge and IE11 will render position: sticky as position: relative.

<div class=”sticky-top”>…</div>.

In bootstrap, Jumbotron is generally used for content that you want to highlight like some slogan or marketing headline etc. in other words it is used to enlarge the size of the headings and to add a margin for landing page content

To use the Jumbotron in Bootstrap

  • Create a container <div> with the class of .jumbotron
BootstrapFoundation
– Bootstrap offers unlimited number of UI elements– In Foundation UI element options are very limited in numbers
– Bootstraps uses pixels– Foundation use REMs
– Bootstrap encourages to design for both desktop and mobile.– Foundation encourages to design mobile first
– Bootstrap support LESS as its preprocessor– Foundation support Sass and Compass as its preprocessor

The steps for creating basic or vertical forms are

  • Add a role form to the parent <form> element
  • Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed
  • Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements

Bootstrap container is a class which is useful and creates a centred area within the page where our site content can be put within. The advantage of the bootstrap .container is that it is responsive and will place all our other HTML code.

Leave a Reply