What methods can we use to transform Bootstrap rows and columns to resemble a table design?

Attempt number one did not work due to padding issues in the columns.

Attempt number two also failed, leading me to believe I may be making a mistake somewhere.

This is what I am aiming for:

Can anyone provide some assistance? I would prefer avoiding modifications to bootstrap rules if possible.

twitter-bootstrapcss

Answer №1

The fundamental concept behind the Table -> row / column is to ensure that columns in a specific row have equal height regardless of their content.

You can create a table -> row/columns layout using bootstrap grid, but you may encounter issues with uneven column heights.

To address this issue and achieve uniform column heights, you can utilize the flexbox property (keep in mind that it may not work in ie9 or earlier versions).

View this example on JSFiddle

Simply apply the following CSS to a parent container (refer to the fiddle above for a complete demonstration),

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

For more information, check out this resource

Answer №2

To enable a responsive table layout, you can utilize the table-responsive class:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">

    <table class="table table-bordered table-striped">
        <thead>
            <tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Android</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-muted">N/A</td>
            </tr>
            <tr>
                <th scope="row">iOS</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Mac OS X</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Windows</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
            </tr>
        </tbody>
    </table>

</div>
</body>
</html>

Answer №3

Consider implementing a Bootstrap table for your issue. It's a good practice to define the width of each <td> element as per your requirement. Here is an example:

<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>

Reference Link

Answer №4

Everyone has mentioned using table tags, but if you prefer using div elements, you can utilize Bootstrap's grid class to ensure your table looks good on all screen sizes. I have made some adjustments to your code:

<style>
    .table {
        width: auto;
        margin: 0 auto;
        border: 1px solid red;
    }
    .table .row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .table .row div {
        border: 1px solid red;
    }
</style>

<div class="table">

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image1.jpg" alt="image1">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image2.jpg" alt="image2">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image3.jpg" alt="image3">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

</div>

I have applied display: flex; and flex-wrap: wrap; to the .row class to maintain consistent cell heights.

Best of luck!

Answer №5

I've made some adjustments to your code. It may not be exactly what you're looking for, but here it is:

HTML:

<div class="container">
  <div class="row">
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
  </div>

  <div class="row">
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
  </div>
</div>

CSS:

/* Additional CSS applied after bootstrap.css */

.container {
    text-align: center;
}
.container .row {
    display: flex;
}
.container .row:nth-child(even) {
    background: gainsboro;
}
.container .content-column, .container .image-column {
   border: 1px solid grey;
}
.container .row:not(:first-child) .content-column, .container .row:not(:first-child) .image-column {
    border-top: 0px;
}
.container .content-column:not(:first-child), .container .image-column:not(:first-child) {
   border-left: 0px;
}
.image-column {
    padding: 5px;
}
.content-column {
   border: 1px solid grey;
   border-top: 0px;
  font-size: 1.3em;
}
.content-column:not(:first-child) {
   border-left: 0px;
}

Result:

View the code in action here: http://www.bootply.com/1MaNWk0ybV

Answer №6

try implementing display:table for rows and display:table-cell for columns

Answer №7

For a solution to vertical alignment in any cell, check out this code and the comments in the CSS area: http://www.bootply.com/byopZWzR2K

Implementing this code will address the vertical alignment of any table cell.

The same code is provided below:

CSS

/* The play-area class is for testing purposes and aligns the width of the table */
.play-area{width:400px;margin:19px auto}
.play-area img{height:32px;}

.make-this-table{border:1px solid #d7d7d7;overflow:hidden;} /* Adds an outer border to the table */
.make-this-table .row{border-top:1px solid #d7d7d7;background:#e7e7e7} /* Adds separator lines between rows and sets background color */
.make-this-table .row:nth-child(1){border:none;background:#c5c5c5} /* Ignores separator line for first row (head of the table) */


/* Alternating background colors for rows */
.make-this-table .row:nth-child(even) {background:#fff}


/* Align text vertically in middle when next column has more than one line while the first column has only one line */
.make-this-table .row{align-items: center;display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

-

HTML

<div class="play-area">
<div class="make-this-table">

  <div class="row">
    <div class="col-md-4 col-xs-4">
        <img src="http://www.chromium.org/_/rsrc/1438811752264/chromium-projects/logo_chrome_color_1x_web_32dp.png" alt="" style="">
    </div>
    <div class="col-md-8 col-xs-8">
        <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" alt="" style="width:32px;">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Chrome Browser.
    </div>
    <div class="col-md-8 col-xs-8">
        Firefox Browser.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Updated.
    </div>
    <div class="col-md-8 col-xs-8">
      Not Updated<br>New line.<br>Now firefox is updated.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Try new line.
    </div>
    <div class="col-md-8 col-xs-8">
      Adding image to break line: <img src="http://www.w3schools.com/images/compatible_edge.gif" alt="">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Keep trying ..
    </div>
    <div class="col-md-8 col-xs-8">
        Also keep trying Ya labba ..
    </div>
  </div>


</div>
</div>

Answer №8

Below is the code snippet that may assist you with your issue:

Feel free to access the JSFiddle link for a live demo: JSFiddle

HTML CODE

<div style="width: 900px; margin: 0 auto;display:table-cell; border: 1px solid red;">
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Greetings from stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello universe!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Greetings from stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello universe!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Greetings from stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello universe!
    </div>
  </div>
</div>

CSS CODE

.image-column {
   border: 1px solid black;
}
.tableColumnDiv{
  display:table-cell;
  border: 1px solid black;
}

Answer №9

Check out the live demonstration... This is precisely what you're looking for.... Hopefully, it aids you in some way.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" >
  <div class="row" style="border: 1px solid grey;">
    <div class="col-md-4  col-sm-4  col-xs-4 text-center" style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4  text-center"  style="border-right:1px solid grey">
      <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
  </div>
 <div class="row" style="border: 1px solid grey;background-color:#f3f3f3">
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
    <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
       <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
         <strong>Yes</strong>
    </div>
  </div>
</div>

Answer №10

Although Aigzy and Waldir are both offering solutions, they seem to be making a common mistake. The solutions they suggest lack responsiveness, especially on mobile devices where the 'table' becomes unreadable. To prevent this issue, it is necessary to nest the columns one level deeper, as shown below:

<div class="row">
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
</div>

http://www.bootply.com/jYSePqMDGi

Answer №11

Check out this link for the code on Bootply

Simple 2-step Method:

  1. To create a table-like layout, add an additional class (.row-table) to your .row element and apply the following CSS properties.

    .row-table{ display:flex;  
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;}

  2. Next, add the class .table-cell to your col-x-x elements and specify these CSS styles.

    .table-cell{ border-color: black; border-style:solid; border-width:1px 0 0 1px;}
.row-table .table-cell:last-child{ border-right-width:1px;}
.row-table:last-child .table-cell{ border-bottom-width:1px;}

Note: The width of the columns will be determined by the grid classes you assign.

Answer №12

Consider this approach:

codepen example

By using CSS to adjust the display, you can ensure that the columns have equal heights. You can find the CSS code at the following link:

equal column heights tutorial

Answer №13

I made some adjustments in your second example by swapping the image-column and content-column, and it seems to be working fine. You can give it a try, it might solve your issue...

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    /* Additional CSS styles */

    .row {
        display: flex;
    }
    
    .image-column {
        border: 1px solid black;
    }
    
    .content-column {
        border: 1px solid black;
    }
</style>
<div style="width: 90%; margin: 0 auto;">

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>

        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>
        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>
        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </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

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...

javascriptjquerycssajaxtwitter-bootstrap

The Div element containing the rollover button/picture is failing to resize properly as the window is decreased in size

Whenever I try to resize my browser window in Firefox or Chrome, the div ends up moving instead of resizing. I've searched on stackoverflow for answers but haven't found any solutions yet. Can someone please help me with this issue? Here is what ...

htmlcssdreamweaver

The Bootstrap collapsible feature is causing elements to shift to the adjacent column

I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details. However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the ne ...

cssangularjstwitter-bootstrap

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

html, body { height: 100%; margin: 0px; } .container { display: flex; width: 100%; height: 100%; background-color: yellow; } .box { flex-shrink: 0; } <div> <div class="container"> <div class="box"&g ...

htmlcss

Delete the display:none; attribute to make the item appear on the screen

The following CSS code styles the element: span { position:absolute; float:left; height:80px; width:150px; top:210px; left:320px; background-color:yellow; display:none; //No display ...

jquerycssattributes

Changing the image's flex-grow property will take precedence over the flex settings of other child

This is the error code I am encountering, where "text1" seems to be overridden <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="view ...

javascripthtmlcss

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera. Surprisingly, the effect only seems to work in Opera when I remove the following properties: -webkit-transform: perspective(1px) translateZ(0); transf ...

csssasshoverborder

inconsistency in button heights

I am currently working on a website project for one of my college courses and I have encountered an issue with the button heights in my slide show not matching up. I'm seeking advice or tips on how to align both buttons to have the same height. Can an ...

htmlcssslideshow

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

htmlcssbootstrap-4

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Following the advice in the official PhpStorm documentation, I have implemented a CSS minifier. However, upon attempting to use it, I encountered the following error: cmd.exe /D /C call C:\Users\douglas\AppData\Roaming\npm\css ...

cssnpmphpstormwebstormminify

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

javascriptjqueryhtmlcss

Toggle css comment line using gulp

Is it possible to temporarily deactivate a particular CSS comment on a specific line using Gulp and then reactivate it after completing a build task? As an illustration, I am interested in deactivating the @import 'compass/reset'; statement loca ...

cssnode.jsnpmgulpcompass

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

javascripthtmlcssajax

The battle of line-height versus padding for achieving vertical centering with one-lined text

One-lined text can be vertically centered using either the line-height property or by adding padding-top and padding-bottom. What are the advantages and disadvantages of each method? body { font-size: 12px; font-family: ...

htmlcsscentering

Tips for concealing scrollbars across various browsers without compromising functionality

Is there a way to hide the scrollbar functionality on a horizontal scrollbar without using "overflow: hidden"? I need to maintain JS functionality and ensure compatibility with all modern browsers. $j = jQuery.noConflict(); var $panels = $j('#primar ...

javascriptjquerycssscrollbar

What is causing the mouse to malfunction when interacting with this HTML form?

What is causing the mouse to not work with the form on this specific webpage? The issue here is that the mouse does not seem to be functioning correctly when attempting to interact with the input boxes within the Form. Upon clicking any of the input boxe ...

htmlcss

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

htmlcss

Adjusting Bootstrap CSS Styles

After recently installing bootstrap 3.0 on my website and experimenting with it, I have a few questions. I am looking to customize certain aspects of the jumbotron (and other classes) in my personal .css file named "mycss.css". Here is the code I have add ...

htmlcsstwitter-bootstrap

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

cssmatrix

How can I customize the color of a date range in the jQuery date picker?

Currently, I am using the following method to set a different color for a specific date range - April 5th to April 7th. You can view it here: http://jsfiddle.net/sickworm/dpvz52tf/ var SelectedDates = {}; SelectedDates[new Date('04/05/2015') ...

jquerycsscalendarbackground-colordatapicker