All geek questions in one place

How to make only one column fluid in bootstrap

The following is the structure of my layout in Bootstrap 3.2:

<div class="container-fluid"> <div class="row"> <div class="col-xs-3"> <!-- I want this column to be fixed. --> </div> <div class="col-xs-6"> <!-- I want only this column to be fluid. --> </div> <div class="col-xs-3"> <!-- I want this column to be fixed. --> </div> </div> </div>

As you can see in the comments of the psuedo code, I want only the middle column to be fluid according to the size of the screen.

Is it possible in the style of container-fluid Bootstrap? Or do I need to go through other paths?

+5
source share
1 answer

There is no “bootstrap” path to have fixed-width columns. This way we can use CSS to do what you want in several ways.

  • Use flexbox (best way) - Demo .

 .row { display: flex; } .fixed-side-column { width: 250px; } .fluid-middle-column { flex-grow: 1; }
  1. Use calc() (or the equivalent of JavaScript) with browser support in mind - Demo

 .row > div { float:left; /* Could also use display: inline-block. */ } .fixed-side-column { width:250px; } .fluid-middle-column { width:calc(100% - 500px); }
  1. Use absolute positioning and addition to the middle element to remove the need for any calculations - Demo

You will need to change the markup

 <div class="container-fluid"> <div class="row"> <div class="fluid-middle-column"> <!-- I want only this column to be fluid. --> </div> <div class="fixed-side-column"> <!-- I want this column to be fixed. --> </div> <div class="fixed-side-column right"> <!-- I want this column to be fixed. --> </div> </div> </div> /* CSS */ .fixed-side-column { width:250px; float:left; } .right { float:right; } .fluid-middle-column { position:absolute; z-index:-1; top:0; left:0; width:100%; padding: 0 250px 0 250px; }

You need to add custom media queries to deal with what happens when the screen gets small.

+7
source

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

More articles:


All Articles