{"id":3757,"date":"2018-07-02T10:25:44","date_gmt":"2018-07-02T04:55:44","guid":{"rendered":"https:\/\/code4developers.com\/?p=3757"},"modified":"2018-07-02T10:25:44","modified_gmt":"2018-07-02T04:55:44","slug":"bootstrap-basics-for-beginners","status":"publish","type":"post","link":"https:\/\/code4developers.com\/bootstrap-basics-for-beginners\/","title":{"rendered":"Bootstrap basics for beginners"},"content":{"rendered":"<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. In this article we will discuss about basics of bootstrap.<!--more--><\/p>\n<h3 id=\"bootstrap\">Bootstrap:<\/h3>\n<ul>\n<li>Bootstrap is a free front-end framework for faster and easier web development<\/li>\n<li>It 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<\/li>\n<li>Bootstrap also gives you the ability to easily create responsive designs<\/li>\n<\/ul>\n<h3 id=\"why-use-bootstrap\">Why use Bootstrap?<\/h3>\n<ul>\n<li><strong>Easy to use:<\/strong>\u00a0Anybody with just basic knowledge of HTML and CSS can start using Bootstrap<\/li>\n<li><strong>Responsive features:<\/strong>\u00a0Bootstrap&#8217;s responsive CSS adjusts to phones, tablets, and desktops<\/li>\n<li><strong>Mobile-first approach:<\/strong>\u00a0In Bootstrap 3, mobile-first styles are part of the core framework<\/li>\n<li><strong>Browser compatibility:<\/strong>\u00a0Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)<\/li>\n<\/ul>\n<h3 id=\"some-steps-that-required-for-making-web-pages-using-bootstrap\">Some steps that required for making web pages using Bootstrap :<\/h3>\n<ol>\n<li><strong>Add the HTML5 doctype:<\/strong>\n<p style=\"text-align: left;\">Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.<\/p>\n<p>Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set.<\/p>\n<pre class=\"theme:github lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt; \r\n  &lt;\/head&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<\/li>\n<li><strong>\u00a0Bootstrap 3 is mobile-first:<\/strong><\/li>\n<\/ol>\n<ul>\n<li>Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.<\/li>\n<li>To ensure proper rendering and touch zooming, add the following\u00a0<code class=\"w3-codespan\">&lt;meta&gt;<\/code>\u00a0tag inside the\u00a0<code class=\"w3-codespan\">&lt;head&gt;<\/code>element:<\/li>\n<\/ul>\n<pre class=\"theme:github lang:default decode:true\" style=\"padding-left: 30px;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/pre>\n<ul>\n<li>The\u00a0<code class=\"w3-codespan\">width=device-width<\/code>\u00a0part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).<\/li>\n<li>The\u00a0<code class=\"w3-codespan\">initial-scale=1<\/code>\u00a0part sets the initial zoom level when the page is first loaded by the browser.<\/li>\n<\/ul>\n<p>3.\u00a0<strong>\u00a0Containers:<\/strong><\/p>\n<ul>\n<li>Bootstrap also requires a containing element to wrap site contents.<\/li>\n<li>There are two container classes to choose from:\n<ul>\n<li>The\u00a0<code class=\"w3-codespan\">.container<\/code>\u00a0class provides a responsive\u00a0<strong>fixed width container<\/strong><\/li>\n<li>The\u00a0<code class=\"w3-codespan\">.container-fluid<\/code>\u00a0class provides a\u00a0<strong>full width container<\/strong>, spanning the entire width of the viewport<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>What to read next?<\/p>\n<ul>\n<li><a href=\"https:\/\/code4developers.com\/advanced-css-tricks-and-techniques\/\">Advanced CSS Tricks and Techniques<\/a><\/li>\n<li><a href=\"https:\/\/code4developers.com\/css-keylogger\/\">CSS Keylogger<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. In this article we will discuss about basics of bootstrap.<\/p>\n","protected":false},"author":154,"featured_media":3756,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[195,196],"powerkit_post_featured":[],"class_list":{"0":"post-3757","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlstylesheet","8":"tag-bootstrap","9":"tag-css"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/Boostrap_logo.svg_.png?fit=200%2C201&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-YB","jetpack-related-posts":[{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":3757,"position":0},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3544,"url":"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/","url_meta":{"origin":3757,"position":1},"title":"Angular 6 CRUD \u2013 Part 1: Project Setup, Routing, Service","author":"Nisarg Dave","date":"May 9, 2018","format":false,"excerpt":"This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/json-server-call-300x297.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3376,"url":"https:\/\/code4developers.com\/ionic-project-structure-installation\/","url_meta":{"origin":3757,"position":2},"title":"Ionic Project Structure and Installation","author":"Pratik Maniar","date":"April 1, 2018","format":false,"excerpt":"Ionic is a framework for web developers to develop a mobile application. It is used to create an hybrid application which works as an native apps. Using Ionic we can build mobile, web, and desktop applications with one shared code. In this getting started with Ionic article we will talk\u2026","rel":"","context":"In &quot;Ionic&quot;","block_context":{"text":"Ionic","link":"https:\/\/code4developers.com\/category\/ionic\/"},"img":{"alt_text":"Ionic","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":3757,"position":3},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":3757,"position":4},"title":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch","author":"Arif Khoja","date":"August 30, 2020","format":false,"excerpt":"In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in the Angular web application. Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"connect-angular-firebase","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4091,"url":"https:\/\/code4developers.com\/create-custom-pipes-aka-filters-in-angular-2-x\/","url_meta":{"origin":3757,"position":5},"title":"Create Custom Pipes &#8211; Filters in Angular 2.X +","author":"Arif Khoja","date":"March 10, 2019","format":false,"excerpt":"Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time). For such small and repeated\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/154"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3757"}],"version-history":[{"count":2,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3757\/revisions"}],"predecessor-version":[{"id":3782,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3757\/revisions\/3782"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3756"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3757"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}