This Bootstrap tutorial is designd for beginners and experienced professional, covering basics and advanced concepts including including working with Bootstrap\u2019s CSS classes, incorporating JavaScript plugins, and more. This tutorial will help you with the knowledge and skills to create stunning and responsive websites.<\/p>\n\n\n\n
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). All thanks to Bootstrap developers \u2013 Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source project.
<\/p>\n\n\n\n
In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS. The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or you can groups the columns together to create wider columns.Bootstrap Grid System is responsive and the columns are re-arranged automatically according to the screen size.
<\/p>\n\n\n\n
Grid Classes:-<\/strong>The Bootstrap grid system has four classes:- xs (for phones – screens less than 768px wide) sm (for tablets – screens equal to or greater than 768px wide) md (for small laptops – screens equal to or greater than 992px wide) lg (for laptops and desktops – screens equal to or greater than 1200px wide) Bootstrap Grid Example :- <\/strong><\/p>\n\n\n\n Navigation Bars<\/strong><\/p>\n\n\n\n A navigation bar is a navigation header that is placed at the top of the page.With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.A standard navigation bar is created with.<nav class=”navbar navbar-default”>.<\/p>\n\n\n\n Navigation Bar Example:-<\/strong><\/p>\n\n\n\n A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you\u2019re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.<\/p>\n\n\n\n Example :-<\/strong><\/p>\n\n\n\n
Follow the below instructions while creating a Bootstrap Grid:
Create a row (). Add the number of columns, you want in the grid (tags with appropriate .col-–<\/em> classes).
Note that numbers in .col-–<\/em> should always add up to 12 for each row.<\/p>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>Job<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"\/>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<h1>Grid Example<\/h1>\r\n<div class=\"row\">\r\n<div class=\"col-md-3\"style=\"background-color:lavender;\">Rahul<\/div>\r\n<div class=\"col-md-3\"style=\"background-color:lavenderblush;\">Vijay<\/div>\r\n<div class=\"col-md-3\"style=\"background-color:lavender;\">Kartik<\/div>\r\n<div class=\"col-md-3\"style=\"background-color:lavenderblush;\">Ajeet<\/div>\r\n<\/div>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"><\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>Bootstrap Example<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\">\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-default\">\r\n<div class=\"container-fluid\">\r\n<div class=\"navbar-header\">\r\n<a class=\"navbar-brand\" href=\"#\">WebSiteName<\/a>\r\n<\/div>\r\n<ul class=\"nav navbar-nav\">\r\n<li class=\"active\"><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Page 1<\/a><\/li>\r\n<li><a href=\"#\">Page 2<\/a><\/li>\r\n<li><a href=\"#\">Page 3<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/nav>\r\n<div class=\"container\">\r\n<h3>Basic Navbar Example<\/h3>\r\n<p>A navigation bar is a navigation header that is placed at the top of the page.<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html>\n<\/code><\/pre>\n\n\n\nBootstrap Card ?<\/h2>\n\n\n\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>Bootstrap Card<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.2\/dist\/css\/bootstrap.min.css\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.7.1\/dist\/jquery.slim.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.1\/dist\/umd\/popper.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.2\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<h2>Basic Card<\/h2>\r\n<div class=\"card\">\r\n<div class=\"card-body\">Basic card<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\n\nBootstrap Forms<\/strong>\n\nForm controls automatically receive some global styling with Bootstrap.\r\nAll textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.\r\nBootstrap Form Layouts\r\nBootstrap provides three types of form layouts:\r\nVertical form (this is default)\r\nHorizontal form\r\nInline form\r\nStandard rules for all three form layouts:\r\nWrap labels and form controls in <div class=\"form-group\"> (needed for optimum spacing)\r\nAdd class .form-control to all textual <input>, <textarea>, and <select> elements.<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>Bootstrap Example<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\">\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<h2>Vertical (basic) form<\/h2>\r\n<form action=\"\/action_page.php\">\r\n<div class=\"form-group\">\r\n<label for=\"email\">Email:<\/label>\r\n<input type=\"email\" class=\"form-control\" id=\"email\" placeholder=\"Enter email\" name=\"email\">\r\n<\/div>\r\n<div class=\"form-group\">\r\n<label for=\"pwd\">Password:<\/label>\r\n<input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Enter password\" name=\"pwd\">\r\n<\/div>\r\n<div class=\"checkbox\">\r\n<label><input type=\"checkbox\" name=\"remember\"> Remember me<\/label>\r\n<\/div>\r\n<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\r\n<\/form>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"