- link
- container
- container-fluid
- row
- col-md-1
Fluid Container, rows and columns
- container will leave a large margin
- container-fluid is full-page
- rows need to be divided into 12 columns (or fewer that add up to 12)
- col-md-1, col-md-2 ..
examples/bootstrap/fluid-container.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .col-md-1 { background-color: red; } .col-md-2 { background-color: lightblue; } .col-md-3 { background-color: blue; } .col-md-7 { background-color: yellow; } .col-md-10 { background-color: green; } </style> <title>Bootstrap grid with fluid container</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-1">Left 1</div> <div class="col-md-10">Center 10</div> <div class="col-md-1">Right 1</div> </div> <div class="row"> <div class="col-md-2">Left 2</div> <div class="col-md-7">Center 2</div> <div class="col-md-3">Right 3</div> </div> </div> </body> </html>