How can I create a responsive grid in Bootstrap that degrades gracefully with just two simple steps?

My previous experience has involved working with the YAML CSS framework, where elements degrade in stages. I am now trying to translate this into a WordPress theme based on Bootstrap 2.3x. However, I am struggling with achieving responsiveness, as it seems to only work in one step. Any help or guidance would be greatly appreciated.

I have created a jsfiddle for reference.

Update: I have updated to version 3.x of Bootstrap. Hoping that this will make finding a solution feasible...

The code snippet is provided below:

<div class="row-fluid" style="padding:1em;margin-top:3em;">
    <div class="span12">
        <div class="row-fluid">
            <div class="span8">
                <div class="row-fluid">
                    <div class="span4"> <a class='' href='#'>
                    <img class='media-object medium' src='http://dummyimage.com/160x250/ccc/222.png' id=''>
                </a>

                    </div>
                    <div class="span8">
                        <table class="table table-hover">
                            <tr>
                                <td><span class="pull-right">author</span>
                                </td>
                                <td><span class="pull-left text-bright"><a>Some Author</a></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Title</span>
                                </td>
                                <td><span class="pull-left text-bright">The Earth within</span>
                                </td>
                            </tr>
                           [Additional code snippets...]
                        </table>
                    </div>
                </div>
            </div>
            <div class="span4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
        </div>
    </div>
</div>

htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Answer №1

If you have upgraded to Bootstrap 3, there is no need for custom CSS. Simply utilize the md and xs classes...

http://www.bootply.com/117713

<div class="row" style="padding:1em;margin-top:3em;">
    <div class="col-md-12">
        <div class="row">
                <div class="col-md-2 col-xs-4">
                   <a class="" href="#">
                    <img class="media-object medium img-responsive" src="http://dummyimage.com/160x250/ccc/222.png" id="">
                   </a>
                </div>
                <div class="col-md-6 col-xs-8">
                        <table class="table table-hover">
                            <tbody>
                                <tr>
                                    <td><span class="pull-right">author</span>

                                    </td>
                                    <td><span class="pull-left text-bright"><a>Some Author</a></span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Title</span>

                                    </td>
                                    <td><span class="pull-left text-bright">The Earth within</span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Serial</span>

                                    </td>
                                    <td><span class="pull-left text-bright">Keine / Einzelroman</span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Publisher</span>

                                    </td>
                                    <td><span class="pull-left text-bright">Bookmonsters </span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Published in</span>

                                    </td>
                                    <td><span class="pull-left text-bright">2011-01-24</span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Info</span>

                                    </td>
                                    <td><span class="pull-left text-bright">asdfasfd</span>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                </div>
                <div class="col-md-4 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip.
                </div>
          </div><!--/row-->
     </div><!--/col-12-->
</div><!--/row-->

Answer №2

To ensure your example functions properly, you will need to modify bootstrap's default styling. Begin by incorporating the following CSS:

@media (max-width: 767px) {
    .override [class*=span] {
        float: left;
    }

    .override .span4 {
        width: 30%;        
    }

    .override .span8 {
        width: 70%;        
    }
}

Access the updated fiddle here

Answer №3

Are you aiming for something like this? If you're using bootstrap 3, this might be what you're looking for:

<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
  <img src="http://placehold.it/200x300" class="pull-right">  
</div>
  <div class="col-md-9 col-sm-9 col-xs-3">
    <div class="row">
      <div class="col-md-12">
         <table class="table table-hover">
                            <tbody><tr>
                                <td><span class="pull-right">author</span>
                                </td>
                                <td><span class="pull-left text-bright"><a>Some Author</a></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Title</span>
                                </td>
                                <td><span class="pull-left text-bright">The Earth within</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Serial</span>
                                </td>
                                <td><span class="pull-left text-bright">Keine / Einzelroman</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Publisher</span>
                                </td>
                                <td><span class="pull-left text-bright">Bookmonsters </span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Published in</span>
                                </td>
                                <td><span class="pull-left text-bright">2011-01-24</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Info</span>
                                </td>
                                <td><span class="pull-left text-bright">asdfasfd</span>
                                </td>
                            </tr>
                        </tbody></table>
</div>
      <div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
    </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

I want to display a div above an image when hovering over it

.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...

jquerycss

Guide to counting the number of image tags within a parent div and selectively removing them starting from a specific position

My dynamic image tag <img> is generated inside a div from the database using fetching. Here is how my HTML looks: <div class='forimgbox'> <p class='palheading'>Pals</p> <img src='userpic/2232323.p ...

javascriptjqueryhtmlcss

Storing HTML file input in an SQL database as a blob type: A Step-by-Step Guide

Currently, I am in the process of designing a website that includes forms for user submission. The input data provided by the users is stored in a SQL server database. While text, numbers, and dates are successfully being stored, I am encountering an issue ...

htmlsqlplsql

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

javascripthtmlcss

I am looking to customize the CSS properties of vaadin-dialog-overlay in a unique way for each view

I am working with a vaadin-dialog element that has been declared in the following way: render() { return html` <vaadin-vertical-layout class="contents-list"> <h2 class="osiris-block-title">Feeds Overview</h2> ...

htmlcsstypescriptvaadinvite

Customizing Bootstraps Table Row Color Schemes

I am a novice with Bootstrap and exploring ways to customize the default table colors, specifically the rows. I want to change the color to a solid one without modifying the original Bootstrap CSS file. Despite trying to override it with a new class, Boots ...

htmlcsstwitter-bootstraphtml-tableodoo-8

A guide on converting SVG Files to PDF format with JSPDF using JavaScript

I encountered difficulties converting SVG Files into PDF using JSPDF. Here is the code I tried: var doc = new jsPDF(); var test = $.get('amChart.svg', function(svgText){ // console.log(svgText); var svgAsText = new XMLSerialize ...

javascripthtmlsvgpdf-generationjspdf

JQuery's Nested Tab Size Configuration

Hello everyone! I'm brand new to JQuery UI and could really use some help. I have a nested tab set up using JQuery UI. Within this nested tab, I have several controls that will be placed. The challenge I'm facing is that the height of the inner ...

jquerycssjquery-ui

What is the best way to use AngularJS to extract values from the first dropdown menu that are linked to the values selected in the second

How can I link values in two dropdowns using AngularJS? Hello everyone, I have set up two dropdown fields in MyPlunker and within the ng-option tag, I have applied a filter like filter:{roles: 'kp'} to only display users with the role of kp. T ...

htmlangularjsmeanjs

What is the best way to reset an element to its default state upon clicking a div using jQuery?

I am working on a navigation menu that has a toggle for the drop-down feature. The default state of the toggle is blue, but when the drop-down menu is activated, it turns red. The issue I am facing is that when I click on one of the li items in the menu, ...

javascriptjqueryhtmlcss

Modifying Table Cell Backgrounds Based on Value in React Tables

I am currently utilizing reactstrap to design my table and employing axios to interact with my backend data. The objective is to dynamically change the background color of a cell based on its value. For instance, if the cell value is less than 0.25, it sh ...

cssreactjsreact-tablereactstrap

Steps for positioning the scroll-thumb in the middle of the scrollbar

Currently, I am working on a react application and facing an issue while trying to display images with custom zoom-in/zoom-out functionality. Due to the need to add markers to each image that require precise positioning, using a pre-existing library for zo ...

cssreactjsimagescrollbarzooming

Designing a webpage feature that enables users to choose an image from the selection

Can someone help me with coding a feature on my page where users can simply click an image to select their favorite design? I want the selection to be recorded and sent to me without requiring any text input from the user. I plan to use jQuery to display t ...

jqueryhtmlformsxhtml

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

positioning of background images on a web page

I am trying to position my background image in the bottom right of my page: .bg{ background-image: url("Wave.png"); position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 85%; background-position: bottom ...

htmlcssbootstrap-4

Eliminate the grey border located above the arrow in the Bootstrap tooltip

Is there a reason why a thin border is showing up on all of my Bootstrap tooltips? I have looked extensively for answers but have not been able to find anyone else having the same issue. This border appears consistently in all of our MVC projects, and we h ...

csstwitter-bootstrapmodel-view-controller

Show the submenu at all times

I am looking to customize the code in order to always display the submenu of the active main menu item. How can I adjust the following code to meet these requirements? p, ul, li, div, nav { padding: 0; margin: 0; } body { font-family: Calibri; } # ...

htmlcss

The Angular material checkbox has a mind of its own, deciding to uncheck

I am having an issue with a list displayed as checkboxes using angular-material (Angular 7). Below, I will provide the code snippets for both the .html and .ts files. Every time I click on a checkbox, it gets checked but then immediately becomes unchecked ...

htmlangulartypescriptangular-material

Unable to retrieve href URL from html_node using rvest

Having trouble using the rvest package and xpath to extract embedded links (football team names) from websites and getting empty results. Any suggestions on how to fix this issue? Check out the code below: library(rvest) url <- read_html('https: ...

htmlrweb-scrapingxpathrvest

confirmation message upon completing a form submission

<script> var remainingCredit = document.getElementById("cor_credit"); var remaining = document.getElementById("remain_credit"); function validateForm() { if (remaining.value < remainingCredit.value) { return conf ...

javascripthtml