Creating flexible DIV columns that adjust to display changes using Bootstrap 3's CSS

Question

Creating flexible DIV columns that adjust to display changes using Bootstrap 3's CSS

I am currently facing a challenge with a simple layout problem:

My objective is to create a toggle side menu. When the side menu is visible, the main layout should be 80% width, and when it is not visible, the main layout should be 100% width, as shown below:

I want to incorporate Bootstrap 3 and utilize their CSS styles so that I can easily add rows and columns to the primary div (highlighted in light orange in the diagram).

Your assistance would be greatly appreciated :)

UPDATE:

This is my current progress:

<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
    <div style="border:solid 1px red">
        <div class="row">
            <div class="col-lg-6">Some Content</div>
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-12">Some content</div>
                </div>
            </div>
        </div>
    </div>
</div>

<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>

Demo

html css twitter-bootstrap layout web

Answer 1

Answer №1

In reality, you cannot simply use 20% in Bootstrap grid sizing because it operates on a 12-column system. This means that 100% equals to 12 out of 12 columns, making the smallest unit 1/12 which is equivalent to 8.33%. The best approach for your sidebar would be to make it 3/12 or 25%. Here is the code snippet for achieving this:

<div class="row">
  <div class="col-xs-12 col-sm-3">
    sidebar content
  </div>
<div class="col-xs-12 col-sm-9">
    main content here
  <div class="row">
    <div class="col-xs-12">
      your 100% main content here
    </div>
  </div
</div>

Is my assumption correct that the bottom image represents how it will appear on a mobile device..?

Answer 2

In reality, you cannot simply use 20% in Bootstrap grid sizing because it operates on a 12-column system. This means that 100% equals to 12 out of 12 columns, making the smallest unit 1/12 which is equivalent to 8.33%. The best approach for your sidebar would be to make it 3/12 or 25%. Here is the code snippet for achieving this:

<div class="row">
  <div class="col-xs-12 col-sm-3">
    sidebar content
  </div>
<div class="col-xs-12 col-sm-9">
    main content here
  <div class="row">
    <div class="col-xs-12">
      your 100% main content here
    </div>
  </div
</div>

Is my assumption correct that the bottom image represents how it will appear on a mobile device..?

Answer 3

Answer №2

I recently tackled a similar problem and found a solution that worked well for me. Below is the code snippet that I used in a file called test.php:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Demo</title>
  <link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="PATH/demo.css">
  <script type="text/javascript" src="PATH/respond.min.js"></script>

</head>
<body>


<div class="container">
  <div class="row" >
      <div class="col-sm-3 side20" > This is side content</div>
      <div class="col-sm-9 main80">This is the main content.</div>
  </div>
  <button class="btn btn-default" role="button">Toggle</button>
  <div class="row" >
      <div class="col-sm-3 side20" >n</div>
      <div class="col-sm-9 main80" >This is the main content</div>

  </div>

<footer class="row">
<div class="col-xs-6 copyright">
    &copy Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
    <small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>

The CSS styles used can be found in demo.css:

.container{
    width: 100%;
    background...
   
   (The remaining CSS styling has been omitted for brevity)
}

To enable the toggle functionality, I implemented the following jQuery script in custom.js:

$(".btn").on("click", function(){
    $(".col-sm-3").toggle();
    $(".main80").toggleClass("col-sm-12");
    $(".main80").toggleClass("col-sm-9");
});

I hope this code snippet helps you with your project. Happy coding!

Answer 4

I recently tackled a similar problem and found a solution that worked well for me. Below is the code snippet that I used in a file called test.php:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Demo</title>
  <link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="PATH/demo.css">
  <script type="text/javascript" src="PATH/respond.min.js"></script>

</head>
<body>


<div class="container">
  <div class="row" >
      <div class="col-sm-3 side20" > This is side content</div>
      <div class="col-sm-9 main80">This is the main content.</div>
  </div>
  <button class="btn btn-default" role="button">Toggle</button>
  <div class="row" >
      <div class="col-sm-3 side20" >n</div>
      <div class="col-sm-9 main80" >This is the main content</div>

  </div>

<footer class="row">
<div class="col-xs-6 copyright">
    &copy Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
    <small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>

The CSS styles used can be found in demo.css:

.container{
    width: 100%;
    background...
   
   (The remaining CSS styling has been omitted for brevity)
}

To enable the toggle functionality, I implemented the following jQuery script in custom.js:

$(".btn").on("click", function(){
    $(".col-sm-3").toggle();
    $(".main80").toggleClass("col-sm-12");
    $(".main80").toggleClass("col-sm-9");
});

I hope this code snippet helps you with your project. Happy coding!

Answer 5

Answer №3

Discovered a unique CSS solution involving the use of table display:

Utilizing HTML and CSS:

<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
    <div style="display:table-row">
        <div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
        <div style="display:table-cell">
            <div class="row">
                <div class="col-xs-6">6 col</div>
                <div class="col-xs-6">6 col</div>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>

Click here for JS Fiddle link, showcasing cell display toggle functionality

Answer 6

Discovered a unique CSS solution involving the use of table display:

Utilizing HTML and CSS:

<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
    <div style="display:table-row">
        <div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
        <div style="display:table-cell">
            <div class="row">
                <div class="col-xs-6">6 col</div>
                <div class="col-xs-6">6 col</div>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>

Click here for JS Fiddle link, showcasing cell display toggle functionality

Creating flexible DIV columns that adjust to display changes using Bootstrap 3's CSS

Answer №1

Answer №2

Answer №3

Similar questions

Does the Bootstrap 4 flex system allow for arranging self-row items within a parent column?

The display of website content across various screens

Issues with label tags not functioning properly on modal windows

Form that adjusts input fields according to the selected input value

Setting row heights based on text in a chosen column within Excel

What could be causing Django to fail in including an entry to my Model table?

"Capturing the essence of your online presence: The

Is it possible to verify the compatibility of certain at-rules in CSS?

Why does the styling of the inner Span adhere to the style of the outer Span?

What steps are involved in interactive image coloring using JavaScript?

Transferring Information from EventSource Server Sent Event (SSE) to a Different Variable

The jquery fancybox ajax modal popup fails to display in Internet Explorer 7

Creating unique CSS div designs based on the nth-child selector

Safari's approach to image height measurement

Show the concealed div while simultaneously hiding others to only reveal one at a time

What could be causing the CSS to not display properly on specific routes?

What is the best way to eliminate all styles from an element with jQuery?

Getting rid of the arrow icons in a Material UI TextField

Outlook 2010 failing to display background-color correctly

Is it possible to trigger multiple button clicks using JQuery simultaneously?