Full and boxed width with Bootstrap 3

Question

I'm gonna build a website with 2 layouts: boxed and full width by Bootstrap 3. As bootstrap document, I can create full width layout by using .container-fluid, is it right? In addition, I want to know the way create boxed width layout too.

possible duplicate of [Container-fluid vs .container](http://stackoverflow.com/questions/22262311/container-fluid-vs-container) — ncksllvn, Oct 28 '14 at 17:04
Use `.container` for fixed-width layouts that change width only at the screen size breakpoints (XS, SM, MD, LG). — cvrebert, Oct 28 '14 at 17:46

score 10 · Answer 1 · edited Oct 29 '21 at 17:49

10

Use .container for a responsive fixed width container.

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
  ...
</div>

http://getbootstrap.com/css/

edited Oct 29 '21 at 17:49

Nimantha

6,405
6
28
69

answered Oct 28 '14 at 16:26

Refilon

3,334
1
27
51

1

It sounds like he is wanting an inset page. (Boxed Content) More adaptive rather than responsive. ;) – W3bGuy Jan 06 '15 at 23:57

score 0 · Answer 2 · answered Jan 06 '15 at 23:55

It sounds like the solution you are referring to is going to take you specifying the container widths using media queries.

Something like this should work for what you are after:

/* Customize container */
@media (min-width: 960px) {
    .container {
        max-width: 780px;
    }
}

The above apply to whether you want the page to be responsive (fluid). If you add the above and add the default template from their page, you should see the differences. Hope this helps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Just to add to this a touch... @Dennis is correct about using the .container class. By default, bootstrap includes media query breaks at "ideal" sizes. However, if you are wanting to accomplish a particular look or feel at your own decided breaks, you would need to override them with your own media queries. — W3bGuy, Jan 07 '15 at 17:50

Full and boxed width with Bootstrap 3

2 Answers2