Bootstrap
Bootstrap Grid System
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.
<!DOCTYPE html>
<html >
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
--------------
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-link">Link</button>
--------------
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="alert alert-success">
<strong>Success!</strong> This alert box indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
---------
Model Popup
https://www.javatpoint.com/oprweb/test.jsp?filename=bootstrapmodal1
Comments
Post a Comment