All geek questions in one place

Bootstrap 3 centered content boot container

I am sure it can be simple, but I have not figured it out yet.

How do you create a container for liquids with a full screen and the content, including navigation, should be centered on the page, as in a non-liquid container?

I'm just trying to get the top navigation / title background to stretch across the page while keeping content with a fixed width.

+5
source share
2 answers

You can surround the .container with your navigation content with another <div> on which you add the background style. See the following example:

 .background { background-color: #f99; } .content { background-color: #9f9; } 
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="background"> <div class="container"> <div class="row"> <div class="col-xs-12 content">Content</div> </div> </div> </div>
+5
source

A crude method is to use the Bootstrap mesh concept. Bootstrap divides your row into 12 colonies. The trick is to insert a block with four black spaces before and after the four-dimensional block. Example:

 <div class="container-fluid"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"> <h2>Title</h2> <p>Your content here</p> </div> <div class="col-sm-4"></div> </div> </div>
+1
source

Source: https://habr.com/ru/post/1210783/

More articles:


All Articles