Back to Course

BootStrap

0% Complete
0/39 Steps
  1. Introduction to Bootstrap
    What is Bootstrap ?
  2. Why Bootstrap ?
  3. Bootstrap Setup
  4. Customizing Install
  5. Responsive Design
  6. Container class
  7. Grid
    Grid System
  8. Bootstrap Grid Column
  9. Dynamic Layouts
  10. Utility Classes
  11. Navigation Components
    Navs
  12. Navbars
  13. Page Components
    Headers
  14. Panels
  15. ListGroups
  16. Breadcrumbs
  17. Labels
  18. Buttons
  19. Glypgicons
  20. Wells
  21. Forms
    Creating forms
  22. Inline & horizontal forms
  23. Form Validation
  24. Bootstrap Plugins
    Alert Messages
  25. Buttons group
  26. Scroll Spy
  27. Tabs
  28. Collapse
  29. Modal
  30. Customer Plugins
    Bootbox.js
  31. DateTime Picker
  32. Font Awesome
  33. Off-Canvas
  34. Image Gallery
  35. Social Buttons
  36. Sweet Alert
  37. Button
    Buttons
  38. Button Group Button
  39. Button Method

Participants2254

Show more
BootStrap Container class
In Progress
Lesson 6 of 39
In Progress

Container class

Akash

In bootstrap, container is used to set the content’s margin. It contains row elements and the row elements are container of columns. This is known as grid system.

There are two container classes in bootstrap:

  1. .container
  2. .container-fluid

.container

The .container class provides a responsive fixed width container.

In the below example, the div with class “container” will have a fixed left and right margin and will not take the complete width of it’s parent or the viewport.

<html>
<head>
<title>Bootstrap Container Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container" style="background: lightblue;">
	<h1>Bootstrap</h1>
	<p>Container Example.</p>
	</div>
</body>
</html>

Output:

KodNest bt5 1

.container-fluid

The .container-fluid class provides a full-width container which spans the entire width of the viewport.

In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.

<html>
<head>
<title>Bootstrap Container Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid" style="background: lightblue;">
	<h1>Bootstrap</h1>
	<p>Container Fluid Example.</p>
	</div>
</body>
</html>

Output:

KodNest bt6 1

New Report

Close