Responsive Layout using bootstrap

Developer
Tauseef
Size
3,131 Kb
Views
34,408
  1. Responsive Layout using bootstrap Previews
  2. Responsive Layout using bootstrap HTML Codes
  3. Responsive Layout using bootstrap CSS Codes
  4. Responsive Layout using bootstrap JS Codes

How do I make an responsive layout using bootstrap?

What is a responsive layout using bootstrap? How do you make a responsive layout using bootstrap? This script and codes were developed by Tauseef on 07 September 2022, Wednesday.

Responsive Layout using bootstrap Previews
IQ Test

Responsive Layout using bootstrap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Layout using bootstrap</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <!-- Main --> <div class="main"> <!-- Header section --> <div class="main-header"> <h2>TEST.COM</h2> </div> <!-- End Header Section --> <!-- Content Section --> <div class="container-fluid well" id="page-container"> <div class="header well"> <!-- steps --> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Checkout :</a> <ul class="nav nav-tabs" id="checkout-progress-tab"> <li class="active"><a href="#page1" data-toggle="tab">Shipping</a></li> <li><a href="#page2" data-toggle="tab">Payment</a></li> <li><a href="#page3" data-toggle="tab">Confirm</a></li> <li>&nbsp;</li> </ul> </div> </div> <!-- end steps --> </div> <div class="well tab-content"> <!-- page 1 --> <div class="container-fuild panel tab-pane active" id="page1"> <div class="row-fluid"> <div class="span5"> <h5>Shipping Address</h5> <br /> <br /> <div class="well"> </div> </div> <div class="span5 offset2"> <h5>Billing Address</h5> <div class="checkbox"> <label> <input type="checkbox"> Billing Address is different from Shipping Address </label> </div> <div class="well"> </div> </div> </div> </div> <!-- end page 1 --> <!-- page 2 --> <div class="container-fuild panel tab-pane" id="page2"> <div class="row-fluid"> <div class="span5"> <h5>Select Shipping Method</h5> </div> <div class="span5 offset2"> <h5>Order Summary</h5> </div> </div> </div> <!-- end page 2 --> <!-- page 3 --> <div class="container-fuild panel tab-pane" id="page3"> <div class="row-fluid"> <div class="span5"> <h5>Confirm Order / Payment</h5> </div> <div class="span5 offset2"> <h5>Pay Now</h5> </div> </div> </div> <!-- end page 3 --> </div> </div> <!-- End Content Section --> <!-- Footer Section --> <footer> <i>test.com</i> </footer> <!-- End Footer Section --> </div> <!-- End Main --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Layout using bootstrap - Script Codes CSS Codes

div{ /*border: 1px solid black !important;*/
}
.main{ margin-left: 10%; margin-right: 10%; border: 1px solid; background-image: url('http://chi-mktweb1.corp.auctiva.com/Content/images/dummy/wavegrid.png');
}
.main-header{ background-image: url('http://chi-mktweb1.corp.auctiva.com/Content/images/dummy/escheresque_ste.png'); height: 50px;
}
.main-header h2{ color: white; margin:0 30px;
}
ul.nav li a{ padding-left: 50px;
}
ul.nav {	list-style: none;	overflow: hidden;	font: 18px Helvetica, Arial, Sans-Serif;
}
ul.nav li {	float: left; margin-left: 30px;
}
ul.nav li a {	color: white;	text-decoration: none;	padding: 10px 0 10px 65px;	background: #fafafa;	position: relative;	display: block;	float: left;
}
ul.nav li.active a:after{ border-left: 30px solid #e5e5e5;
}
ul.nav li a:after {	content: " ";	display: block;	width: 0;	height: 0;	border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */	border-bottom: 50px solid transparent;	border-left: 30px solid #fafafa;	position: absolute;	top: 50%;	margin-top: -50px;	left: 100%;	z-index: 2;
}
ul.nav li a:before {	content: " ";	display: block;	width: 0;	height: 0;	border-top: 50px solid transparent;	border-bottom: 50px solid transparent;	border-left: 30px solid black;	position: absolute;	top: 50%;	margin-top: -50px;	margin-left: 1px;	left: 100%;	z-index: 1;
}
ul.nav li a:hover { background: #fafafa; }
ul.nav li.active a:hover:after { border-left-color: #e5e5e5 !important;
}
ul.nav li.active a{ -webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow :none !important;
}
/*****CONTENT******/
.well{ background: none !important;
}
#page-container{ overflow:hidden;
}
/********FOOTER***********/
footer{ background-image: url('http://chi-mktweb1.corp.auctiva.com/Content/images/dummy/escheresque_ste.png'); height: 50px; color: white;
}
/**************MEDIA Queries*****************/
@media(max-width: 550px){ ul.nav li{ display: inline; font-size: 14px; }
}
@media(max-width: 830px)
{ .brand{ display: none !important; } .navbar-inner ul.nav{ width: 100%; margin-left: 0px; } .navbar-inner{ padding: 0px !important; } .navbar-inner:before, .navbar-inner:after{ content: ""; display: none !important; } ul.nav li{ margin-left: 0px; display: inline; width: 33.3%; } ul.nav li a{ border: 1px solid #ccc; } ul.nav li a:hover{ background-color: none; } ul.nav li a:before { content: ""; border: none; margin: 0auto; } ul.nav li a:after { content: ""; border: none; margin: 0 auto; } ul.nav li a:hover{ background: transparent; }
}

Responsive Layout using bootstrap - Script Codes JS Codes

$(function () { $('#checkout-progress-tab').tab('show');
});
Responsive Layout using bootstrap - Script Codes
Responsive Layout using bootstrap - Script Codes
Home Page Home
Developer Tauseef
Username tmjam
Uploaded September 07, 2022
Rating 3
Size 3,131 Kb
Views 34,408
Do you need developer help for Responsive Layout using bootstrap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tauseef (tmjam) Script Codes
Name
Shopping Cart with HTML5 Drag Drop
Single page site
A Pen by Tauseef
Flip using CSS
Responsive email template without media queries
Test
Pulse loader
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!