Difference between revisions of "Team:BGU Israel"

Line 7: Line 7:
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
   <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>
 
</head>
 
<body>
 
<body>
−
 
+
 
−
<div class="container">
+
<div class="container-fluid">
−
   <h1>My First Bootstrap Page</h1>
+
   <h1>Hello World!</h1>
−
   <p>This part is inside a .container class.</p>  
+
   <p>Resize the browser window to see the effect.</p>
−
   <p>The .container class provides a responsive fixed width container.</p>          
+
   <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
 +
  <div class="row">
 +
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
 +
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
 +
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
 +
  </div>
 
</div>
 
</div>
−
<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>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 06:08, 29 July 2018

OriginALS

Bootstrap Example

Hello World!

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 768px wide.

.col-sm-4
.col-sm-4
.col-sm-4