Converting a table-based layout to Bootstrap using the "row" and "col-*-*" classes

My current project is built on a table-layout structure, but now the requirements have changed and we need to make it responsive. To achieve this, we have decided to use Bootstrap.

How can I convert the existing tables into a Bootstrap grid layout without changing the appearance and ensuring responsiveness?

The table-layout on the site is quite complex with multiple levels of nesting. Here's an example:

<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
    <table border="0">
        <tr valign='bottom'>
            <td width='50'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</td>
            <td>
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </td>
        </tr>
    </table>
</td>
<td align='right'>
    <table border="0" cellspacing="0">
        <tr>
            <td align='center' colspan='3'>
                <span>Another tesing text</span>
                <span style='color:#FFFFCC;'> - </span>
                <span style='font-size:11px;color:#fffff;'>Random text</span>
            </td>
        </tr>
    </table>
</td>
</tr>

I have attempted to convert this code using Bootstrap's row and col classes, but I'm facing challenges with maintaining the original look and ensuring functionality.

If you have any general suggestions or tips on how to smoothly transition from a table-based layout to a Bootstrap grid system, please share!

csstwitter-bootstraphtml-table

Answer №1

Check out this amazing piece of writing: Bootstrap 3 Grid system

  • Swap out table and tbody with div class="container"
  • Swap out tr with div class="row"
  • Swap out td with div class="col-ww-nn"
    • Where ww represents device width (xs, sm, md, lg)
    • Where nn is a number between 1-12 for width percentage (out of 12)

Your code has been updated below, with some syntax corrections. Additionally, I've included responsiveness so that on mobile phones (xs devices), your second main column will be on a separate line. You can also make images responsive by adding img-response so their size adjusts based on the device.

<div class="container" style="background-color:#ff00ff">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <img src="#" class="img-responsive">
                </div>
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="font-size:10px;color:#cccccc;">Alpha testing</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="row">
                <div class="col-xs-4 col-sm-4">
                    <span>Another tesing text</span>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="color:#ffffcc;"> - </span>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <span style="font-size:11px;color:#ffffff;">Random text</span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

It's really not as complicated as it seems.

All you have to do is skip over any <table> and <tbody> tags, and treat each <tr> as a block element with the class "row", and every <td> as a block element with the class "col-*-*". It's perfectly fine to nest Bootstrap grids, like so:

<tr style='padding-bottom:1em;'>
  <td>
    <table border="0">
        <tr valign='bottom'>
            <td width='50'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</td>
            <td>
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </td>
        </tr>
    </table>
  </td>
</tr>

You can simply structure it like this:

<div class="row">
  <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-6">&nbsp;</div>
            <div class="col-xs-6">
                <img border="0" src="#" width="100" height="300">
            </div>
            <div class="col-xs-10">&nbsp;</div>
            <div class="col-xs-2">
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </div>
        </div>
  </div>
</div>

Remember, these are just example Bootstrap classes - feel free to customize them to your needs!

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

Webfont issues can lead to incorrect display on your website

Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...

htmlcssinternet-explorercross-browserwebfonts

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

javascripthtmlcss

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

htmljquerycss

Styling does not affect an Angular component that is injected into an iframe

I am facing an issue with styling in an iframe when trying to append my own angular component. Despite various attempts, I have been unsuccessful in getting the styling to apply to the component within the iframe. Upon loading the iframe, I use JavaScript ...

javascripthtmlcssangulariframe

"Troubleshooting a matter of spacing in HTML5 body

I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...

csshtml

Exploring the anatomy of the img src tag

Using jQuery, I have successfully implemented code to display an image when clicked by storing the image source into a variable like this: var imgSrc = $(event.target).attr('src'); I then use this variable to add the image to a div and show it o ...

jqueryhtmlcss

What’s the best method for enclosing a table and text within a div?

The following code snippet generates the following output: However, my desired outcome is this: When I remove <div>hello world</div>, the table fits perfectly within the outer div. But when I add text to the div along with the table, it doesn ...

htmlcss

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

javascriptphpcsscursor

How can I center align my loader inside app-root in Angular2+?

I've successfully added a basic spinner to my <app-root> in the index.html file. This gives the appearance that something is happening behind the scenes while waiting for my app to fully load, rather than showing a blank white page. However, I& ...

javascripthtmlcssangulartypescript

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

Tips for aligning input vertically across rows with bootstrap 5

I'm currently working on a form layout where each row contains a different number of columns, with labels and inputs in each column. However, I'm facing an issue where the start of the input is not aligned vertically for each row. I tried using ...

htmlcssbootstrap-5

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

javascriptjquerycss

Understanding the purpose of the notched property in Material-UI

I am currently integrating Material-UI into a project and exploring their API. One thing that I find confusing is the notched property within the OutlineInput Component. <FormControl variant='outlined'> <OutlinedInput notched={false} ...

htmlcssreactjsmaterial-ui

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

htmlcssbootstrap-4

Utilizing the background-clip property with a gradient overlay

My Objective: https://i.sstatic.net/DscXK.png My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look. ...

htmlcssgradientbackground-clip

Revolutionary Approach to Efficiently Handle Multiple rows with Jquery

Greetings to everyone, I am currently in the process of developing an application that retrieves data from a database via AJAX by calling a .php file. Within this app, I have a table with 4 columns. The first two columns consist of dropdown menus, the thi ...

javascriptphpjquerydynamichtml-table

How can I modify certain attributes within an array of objects?

https://i.sstatic.net/TKkcV.jpgI need help with updating properties within an object array. Below is my code for reference. I have an object array consisting of two arrays, where the first one contains attribute "first" and the second one contains "last". ...

javascriptcssarraysreactjsobject

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...

htmlcsscss-position