31830

Bootstrap 4 Flexbox with Fixed and Flexible Width Columns

Question:

Using Bootstrap 4 and Flexbox, how would you accomplish a 2 column layout with a fixed-width left column and a flexible right column?

I don't see anything in the docs about how to achieve this... I could do it easily enough using vanilla CSS, but I feel like I should use Bootstrap since I'm already pulling it in.

Answer1:

Is this what you are looking for:

HTML CODE---->>

<div class="main-container"> <div class="left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div class="right"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div>

CSS------->>

.main-container{ display:flex; flex-direction:row; } .left{ min-width:200px; max-width:200px; }

Also <a href="https://codepen.io/anon/pen/zwedep?editors=1100" rel="nofollow">Codepen</a> link.

Answer2:

Something like this?

<pre class="snippet-code-css lang-css prettyprint-override">#sticky-sidebar { position:fixed; max-width: 20%; } <pre class="snippet-code-html lang-html prettyprint-override"><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="col-xs-12" id="sticky-sidebar"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div class="col-xs-8" id="main"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> </div

Recommend

  • How to split text as android textview
  • Jquery to display next button once a input button is clicked
  • deleting multiple characters from text file using C
  • How to show tooltip on @ng-select/ng-select options
  • domReady vs ready - Migrating to Polymer 1.0
  • Fade in/out and pause on mouse over with jQuery
  • Bootstrap center align two blocks of text vertically
  • FactoryGirl factory with Trait(s) that returns a Hash with stringed keys
  • Perform function on form submit
  • Jquery - Break/Prevent each loop
  • jquery: how to find an element which is coming 2 elements before current element
  • Img height on auto height div
  • NHibernate Lazy Loading Behaviour
  • Testing Rails module without loading ActiveRecord
  • How to call BeanFactoryPostProcessor.postProcessBeanFactory method when use Spring with XML configur
  • Retrieving values from a PHP Multi-dimensional Array
  • Why does the font in these TD elements render at different sizes?
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • How can I display the parent menu item's description using Wordpress walkers?
  • WPF ICommand CanExecute(): RaiseCanExecuteChanged() or automatic handling via DispatchTimer?
  • How solve “Qt: Untested Windows version 10.0 detected!”
  • Textfile Structure (tables)
  • Unity3D & Android: Difference between “UnityMain” and “main” threads?
  • output of program is not same as passed argument
  • Javascript Callbacks with Object constructor
  • MySQL WHERE-condition in procedure ignored
  • How can I use Kendo UI with Razor?
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • Cannot Parse HTML Data Using Android / JSOUP
  • trying to dynamically update Highchart column chart but series undefined
  • Java static initializers and reflection
  • unknown Exception android
  • Checking variable from a different class in C#
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal