Are you looking to incorporate responsive wells into your Bootstrap Twitter design?

Imagine you have this structure:

<div class="container">
    <div class="row-fluid swell">
    <div class="span9">
        hello world
    </div>
</div>
</div>

And this custom styling (using twitter-bootstrap as a base):

.swell {
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 19px;
}

How can graceful responsiveness be achieved?

(Check out this Plnkr demo, where you can view the website in action; try resizing the browser window to see the issue)

Answer №1

Avoid combining the row and well classes in a single div:

<div class="row-fluid">
  <div class="swell">
    <div class="span9">
     hello world
    </div>
  </div>
</div>

Answer №2

Discovered the answer:

<div class="swell">
    <div class="row-fluid">
        <div class="span9">
            Greetings Earth!
        </div>
    </div>
</div>

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

The AngularJS modal is sending back the results before updating the parent scope

When launching a modal from my web page, I am updating an array passed from the parent. However, when closing the modal and sending back the updated results, the parent scope object is also being updated. If the user decides not to update and cancels the ...

Tips for integrating Angular 4 with SASS

As I embark on my inaugural project utilizing Angular4 and sass, I am grappling with the best approach for working with sass. My setup involves using angular-cli with a default style configuration set to utilize scss syntax. I have also configured the comp ...

Display two columns side by side using Bootstrap on all screen sizes

I'm attempting to have two column divisions appear on the same line. Take a look at my code: <div class="col-md-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Left Division </div> ...

Creating a basic dynamic slideshow/timelapse from scratch

I have a directory containing webcam images that are saved periodically. I am interested in creating a slideshow using these images for a time-lapse effect, without any transition effects or background music. The slideshow should be dynamic so I can use ...

Is there a way to display the back and forward buttons on a popup window opened through window.open or self.open in Chrome browser?

When I try to open a popup window using the code snippet below, I am facing some issues. self.open('myJSPPage','ServicePopUp','height=600,width=800,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes,location=yes'); Afte ...

The inclusion of Jquery Mobile causes CSS to malfunction

After integrating jQuery Mobile into my HTML via a CDN, I noticed that it completely overrides my styles and disrupts my design. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http:// ...

selenium tutorial: accessing checkbox state for frost

There is a frost checkbox that I have defined as follows: <div id="protocol_input" class="ember-view frost-checkbox small"> <input id="protocol_input" class="input ember-view" type="checkbox"> <label class="label" tabindex="0" for="proto ...

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

Delivering JSON and HTML safely to JavaScript applications

As I brainstorm secure methods for delivering HTML and JSON to JavaScript, my current approach involves outputting JSON in this manner: ajax.php?type=article&id=15 { "name": "something", "content": "some content" } However, I am aware of the ...

Avoiding the sudden appearance of unstyled content in Single-File Components

I am looking to update my HTML navigation <div id="header-wrapper"> <div id="header-logo-title"> <nav> <ul id='mainNav'> <li>Home</li> </ul> </nav> ...

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Get the omisphere download I created this hyperlink because my previous attempts didn't work, but unfortunately, this one still isn't functioning properly. Is it possible that the issue is with my CSS? ...

Creating a Form Right in the Middle

I'm new to web development and I'm trying to figure out how to center my form on the page using CSS and HTML. Can someone help me out? <form action="login.php" method="post"> username: <input type="text" id="txtusername" /><br /&g ...

Is there a way to dynamically insert my own <divs> into a container?

I've been doing a lot of research on this issue, but I haven't come across any solutions that have been helpful so far. The problem I'm facing is that I have a div with an id that is supposed to act as a container (#cont_seguim). On the rig ...

What is the best way to apply "display: none;" on a span element nested within a title attribute?

I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons wh ...

Leveraging the power of Bootstrap gem in your Rails application

Currently, I am working on a new Rails project where I have only generated a controller. Despite following the instructions to install Bootstrap using the Bootstrap gem, I keep encountering the following error message: ActionView::Template::Error (identif ...

Turn off the autofill option for passwords in Google Chrome

Is there a way to prevent the password autocomplete dropdown from appearing when clicking on the password field? In Chrome Version 61.0.3163.100, none of the solutions seem to be working. Screenshot This issue has been raised many times, but setting autoc ...

Customize your Bootstrap panel with a user-friendly wysiwyg editor

I'm trying to adjust the height of a wysiwyg editor housed within a panel to be 200px. How can I achieve this? <div class="row"> <div class="col-xs-12 col-md-12 col-lg-8"> <panel heading="Product Des ...

Tips for updating images automatically

I have a HTML file where I display images on a popup window using the code below: <div id="divCheckbox" style="display: none;"> <a class="fancybox" rel="gallery01" title= "BONOS ALQUILER 2/6" href="eventos/Bonos_alquiler.jpg">o ...

Steps for implementing an <h1> element with the React Material UI theme

I have chosen the 'dark' theme and would like to apply it to an h1 element. How can I achieve this? The method below does not yield the desired result: <MuiThemeProvider theme={theme}> <h1>Page Title</h1> ... The following ...

Python's selenium did not locate the specified CSS element

After transferring the code from Selenium IDE to Python, the selenium test was functioning properly except for clicking on the item and scrolling clicks smoothly on an item. Here is the HTML selenium code: <?xml version="1.0" encoding="UTF-8"?> ...