Create a responsive layout with divs using Bootstrap

As an aspiring Bootstrap and Ruby on Rails developer, I am in need of an adaptable "div" element. Here is my current code snippet:

<div class="container-fluid">
  <div class="row-fluid">

    [if true]
    <div class="span2">
      div1
    </div>
    [endif]

    <div class="span10">
     div2
    </div>

  </div>
</div>

I want div2 (span10) to be adaptable, meaning:

If "true", **div1** should take up 20% and **div2** should take up 80%
If "not true", **div1** should not be displayed and the width of dev2 will be 100%.

Despite using span10, I noticed that the width always remains at 82.906%. How can I achieve this?

Here are the details of my environment:

  • Ruby: ruby 1.9.3p448 (2013-06-27 revision 41675) [x86_64-linux]
  • Rails: gem 'rails', '3.2.13'
  • Bootstrap: gem "bootstrap-sass", "~> 2.3.2.2"

Thank you in advance for your help!

csstwitter-bootstrap

Answer №1

Perhaps this is one way to structure it:

<div class="container-fluid">
 <div class="row-fluid">
  [if condition]
  <div class="span2">
   Content for div1
  </div>
  <div class="span10">
  [else]
  <div class="span12">
  [endif]
   Content for div2
  </div>
 </div>
</div>

Answer №2

Here is my solution:

<div class="container-fluid">
  <div class="row-fluid">

    [unless CONDITION]
    <div class="span2">
      div1
    </div>
    [endif]

    <div class="<%= CONDITION? ? "span12" : "span10" %>">
     div2
    </div>

  </div>
</div>

I have implemented the function in a helper, which returns a flag (true or false). By calling this function, I can determine whether to use the class span10 or span12.

Answer №3

To customize your design aesthetic, consider utilizing preprocessor tools such as SAS and LESS

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net

Non Rectangular Header with Bootstrap's Responsive Navbar

Currently, I'm in the process of developing a website and I've been pondering if it's feasible to design a bootstrap navbar with a uniquely shaped header as a background. I envision the header to resemble something like this: https://i.sst ...

htmlcsstwitter-bootstrap

Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right. Scenario: While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of ab ...

javascriptjqueryhtmlcss

Bootstrap 4 collapsible navbar with a stacked design

I am struggling to create a collapsible navbar. Even though everything seems to be working, the nav items are not stacking vertically as they should be. Instead, they are appearing horizontally next to each other. Here is the code snippet: <nav class= ...

htmlcsstwitter-bootstrapbootstrap-4

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created. Here is ...

javascriptjqueryhtmlcss

I have a desire to use Javascript to control CSS styles

Within the CSS code below, I am seeking to vary the size of a square randomly. This can be achieved using the Math.random() property in Javascript, but I am uncertain how to apply it to define the size in CSS. #square { width: 100px; height: ...

javascriptcss

-=:Heading with a decorative vertical line=:-

Currently, I am working on a CSS project that requires page titles (headings) to be centered with horizontal lines positioned vertically on both sides. Additionally, there is a background image on the page which means the title's background must be tr ...

htmlcsspseudo-class

Align text vertically within a link box by overriding inherited CSS styles

Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/ <a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> LCARS Locomotive O.S. </a> My issue pertains to the alignment of text within a graphic. I am utilizing this particular button ...

cssinheritance

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

I'm attempting to create a numbered order list with a circular border around it. The goal is to have the number of the list item centered within the circular border and the entire circle centered within the paragraph. Currently, both the number and th ...

htmlcss

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

htmlcssbrowseruser-experience

What could be causing the unequal sizes of my flex children?

After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...

cssreactjstailwind-css

Tips for eliminating the border radius on select box elements within Bootstrap

I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...

htmlcsstwitter-bootstrap

Utilizing CSS or JavaScript to define the input type

I currently have a group of checkboxes displayed on a webpage within a DIV labeled OPTIONS, shown below: <div id="options"> <input type="checkbox"..... > <input type="checkbox"..... > <input type="checkbox"..... > <input t ...

javascriptcssformshtml

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: https://i.sstatic.net/bzgOT.jpg Internet Explorer: https://i.sstatic.net/qHH1r.jpg The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on In ...

htmlcssinternet-explorer

Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML: <div id="menu"> <ul c ...

jquerycssfadeinfadeout

What is the best location for storing css files in Laravel?

I've come to realize that I can easily make changes to the app.scss file in my Laravel projects and see those changes reflected by running npm run dev or npm run watch. However, I'm faced with a dilemma when dealing with multiple .css files. Whe ...

csslaravel

Is there a way to incorporate multiple rows into my table row headings?

Could someone please assist me in achieving this specific layout shown in the attached screenshot? I am having difficulty adding the ROW TITLE and making the "Merged header title will go here and centered vertically" to expand as illustrated in t ...

htmlcsshtml-table

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

What are the best methods for customizing the backgrounds of the form-floating input labels in the latest version of Bootstrap?

I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine witho ...

csstwitter-bootstrapbootstrap-5