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:

https://i.sstatic.net/yTz6o.png

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: https://i.sstatic.net/7CXNb.png

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

https://i.sstatic.net/KZWzA.png

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

Separating content beautifully with a vertical divider in Material UI's Appbar

Trying to incorporate a vertical Divider component within my Appbar in material-ui has proven to be quite challenging. Despite following a solution recommended on Stack Overflow, the issue persists and I am unable to resolve it: Adding vertical divider to ...

cssreactjsmaterial-ui

Complications arising from IE when using strict doctype with CSS and jQuery

Here's the code I'm using for a sliding caption effect on my gallery site: I specifically implemented the last effect which is the Caption Sliding (Partially Hidden to Visible). $('.boxgrid.caption').hover(function(){ $(".cover", th ...

jquerycssinternet-explorer

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

javascriptcssgoogle-chromeweb-applicationspage-refresh

The dropdown login form is malfunctioning on my Wordpress website

After reading various tutorials and guides online, I managed to set up a login screen. You can view the code in my jsfiddle: Jsfiddle. Unfortunately, I am facing issues with making the code function correctly. Being new to Jquery, I might have made a begin ...

jquerywordpresscss

The concept of Theme.breakpoints does not exist in MUI React, there is

I keep running into the same error where theme.breakpoints is undefined when I try to use theme.breakpoints.up in my code. The versions of the dependencies I am currently using are: "@emotion/react": "^11.9.0", "@emotion/styled&quo ...

javascriptcssreactjsreduxmaterial-ui

What is the best way to connect a relative CSS stylesheet to a master page?

My Java application generates several HTML pages, organized in different directories: html_pages/ | ----> landin_page.html html_pages/details | ----> index1.html html_pages/more_details | ----> index2.html html_pages/css | ...

javascripthtmlcss

Tips for implementing varying styles depending on the number of columns in a table

I am working with multiple tables that share similarities, but differ in the number of columns each table has. I am looking to create a styling rule where depending on the number of columns, the width of each column will be set accordingly. For example, if ...

htmlcss

Conceal a Tag with CSS

Looking to conceal a label using CSS <p class="half_form "> <label for="property_bathrooms">Bathrooms (*only numbers)</label> <input type="text" id="property_bathrooms" size="40" class= ...

csslabel

An innovative tool for discovering how different colors will complement each other

Design may not be my strong suit, but there are times when I need to add a border line or a shade of gray to a background color. Is there a tool available where I can specify background color: #343434 color: #asdfgh and visually see how it will look wit ...

css

How to disable scrolling for React components with CSS styling

When incorporating a React component into my HTML, I follow this pattern: <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> Within my application, th ...

javascripthtmlcssreactjs

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

javascripthtmlcssthree.js

Implementing a vertical tabindex change in Material UI Dialogue table

My material UI dialogue contains a table: <Dialog open={open} onClose={handleClose} maxWidth={'xl'} aria-labelledby='scroll-dialog-title' aria-describedby='scroll-dialog-description' disa ...

javascriptcssreactjsmaterial-ui

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

javascriptjqueryhtmlcssslideshow

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

javascripthtmlcss

How to target the nth child element uniquely in CSS

Is there a way to style items 1 through 10 in CSS without using nth-child selectors individually? Instead of doing: &.nth-child(1) { //style } &.nth-child(2) { //style } &.nth-child(3) { //style } I'm looking for a range selector in C ...

htmlcsssass

Utilization of Scrapy chain selector amidst varied parent elements

I am trying to concatenate two selectors with different parents. The first selector currently in use is: ..css('td:nth-child(8) > span.cap.mtv > ::text') This returns: <Selector xpath="descendant-or-self::td[count(preceding-sibling::* ...

csspython-3.xxpathscrapy

"Divs of the same type automatically adjust size to fit within the

I am currently exploring the possibility of creating a versatile component that can be customized based on the needs of its parent element, whether through bootstrap or traditional flexbox / CSS grid. I want to determine the level of reusability this compo ...

htmlcssbootstrap-4

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

//In this HTML document, I am trying to achieve a functionality where my buttons can toggle the style of an h1 element between the colors yellow and purple when clicked. However, I have encountered an issue where the buttons disappear during a transition ...

javascripthtmljquerycss

Maintain a fixed element and enable the rest of the elements to scroll as the mobile browser address bar collapses while scrolling upwards

Currently facing a challenge where I want the background image to remain static while the address bar and content underneath scroll up. The image occupies 90% of the view height, and although I've prevented it from resizing and jumping when the addres ...

javascripthtmljquerycss

Modify the main container width based on the size of the table

Would it be possible for the main container width to increase along with the table width? Is that achievable? <div class="container main-con"> <table class="table table-hover"> <tr><td></td></tr> </table> ...

javascriptcsshtmltwitter-bootstrap