Khoi Boo Khoi Boo - 9 months ago 145
CSS Question

Put a Cytoscape graph inside a Bootstrap column

I have 4 Bootstrap columns: col-lg-1, col-lg-1, col-lg-4 and col-lg-6 (from left to right).

In the biggest column (col-lg-6), I would like to have a Cytoscape graph. Currently my Cytoscape style is the following (in the section):

<style type="text/css">
#cy {
height: 80%;
width: 50%;
position: absolute;
left: 40%;
top: 20%;

Then in the body section, I have my leftmost column:

<div id="cy" class="col-lg-6" style="background-color:grey;">
Some text


Finally, I have my script also in the body section of the HTML document:

<script type="text/javascript">
$( document ).ready(function() {

var cy = cytoscape({
container: document.getElementById('cy'),



The problem now is that Cytoscape graph (and the leftmost column) doesn't stack below other columns when the browser resizes (as expected in a Bootstrap behavior).

Can you please show me a somehow detailed solution for this, I do appreciate your expertise very much.

Answer Source

First of all include the the Cytoscape graph section inside the col-lg-6

Get rid of position: absolute just set the height: 100%

Check the working demo here

Sample structure:

<!-- container-fluid : start -->
<div class="container-fluid">
    <div class="col-sm-6">

       <----Include other stuff here----->

    <div class="col-sm-6">

      <!-- graph : start -->
      <div class="panel panel-primary">
        <div class="panel-heading">Graph</div>
        <div class="panel-body">
          <div id="cy-container">
            <div id="cy"></div>

      <!-- graph : end -->