All geek questions in one place

Container fluid and side coating with Bootstrap 3

I want the contents of my page to occupy the entire width of the screen with a slight indentation on the right and left and be fluid, but when I wrap div.row and div.col-md-x in <div class="container-fluid"> content of the page touches sides of the screen.

  <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6">

What is the correct way, Bootstrap, to have 100% width , fluid layout and 15px padding left and right?

+6
source share
3 answers

According to the Bootstrap Docs :

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

If you want to fill 15px, add in your CSS:

 .container-fluid { padding: 15px; }

However, you can use percentages ( padding: 2% ) or media queries since 15px will look different with different screen resolutions.

Another option: use <div class="container"> instead of <div class="container-fluid"> . This will give you an inline add-on.

Bootply Demo

+9
source

You can try the identifier before <div id="bd" class="container-fluid"> , and if you add this script after adding Jquery, you can fill it when you resize the window and add more px permissions with more "if" or add only add left or right.

 <script> $(document).ready(function(){ function paddingbd(){ if($(window).width()>800){ $("#bd").css("padding","30px"); }else{ $("#bd").css("padding",""); } } paddingbd(); $(window).on("resize",paddingbd); }); <script>
+1
source

.row has a negative margin of 15px . try adding

 .container-fluid { padding: 15px 30px; }
0
source

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

More articles:


All Articles