Adding bootstrap to a css styled 'table'

Question

I have a page which is currently styled centred on bootstrap css (I'm using bootstrap 3 but could probably upgrade to 4 if it made a difference). I can't get it to style the way that I want. I'm not sure if this is because it is not possible or because of y limited skills in this area.

Essentially the page will show a list of items returned from a search. the list is structured so that on the left there is a 'black box' with the category in white text and o the right there is a text based link and usually some descriptive text.

I have manage to get 90% of what I want this to do without bootstrap using

   display: table;
   display: table-row;
   display: table-column;

This can be seen here in fiddle This needs a little spacing & controlling of margins etc but has the essentials of what I'm trying to achieve - the background colour in the left hand 'cell' expands with the amount of text on the right.

Essentially there are 2 'columns' in the results list. On the left a div with a black background defining the type of item being returned and on the right a link and some text about the link.

I have lost all the bootstrap css now though. Even adding a 'container' makes the 'list' shift to the centre and adding the row and col classes back in stops it working altogether.

So if you look at this fiddle you can hopefully see what I mean (You may need to expand the display page so that it shows as 2 single rows.)

It is a little messy and the structure seems quite convoluted to me but it generally works okay. What I've been asked to do though is align the left and right columns so that they appear in a nice consistent alignment however much text there is (the left is never more than 2 lines but the right varies between 1 and 6 or 7.

Is there a way to use bootstrap to achieve the effect produced in the first fiddle using the 'display: table' elements ?

user_6156367 · Answer

EDIT :

Here's how to use Bootstrap 4 to achieve the same thing as fiddle #1 :

jsFiddle

.row {
  margin-bottom: 5px;
}

.header-light {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}

#result-container .container {
    padding-top: 0.5em;
    padding-left: 0px;
    padding-right: 0px;
}

.title {
    line-height: 1em;
    font-size: 1.8em;
    padding-top: 0px;
    padding-bottom: 0px;
}

.flex-wrapper {
  height:100%;
  display:flex;
  justify-content: center;
  flex-direction:column;
}

.box {
 color: white;
  background-color: #333333;
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.6em 0;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
}





  
      
        Sample bit of text           
      
      
      
          Like Text the quick brown fox jumped over the flat cat with the aplomb of a fit ferile dog like animal
          Description text this is lots of very very very interesting text text
      
    
  
  
      
        Sample bit of text with 2 rows             
      
      
      
           this is short!
          Description text

Bootstrap columns documentation

Get yourself into Bootstrap docs. You need to understand how columns works in Bootstrap and think about your HTML.

Especially, there are containers in containers and rows in rows. Rows should be in containers and sub-containers in rows.

Also, I’m not sure about what you’re asking. Do you must use display: table ? If you only need to display table-formatted query-results, use dataTables. Or, if you can, generate a simple table structure for your research results, which should be more understandable for you, easier to implement and provides a vertical alignement functionality which should suit your needs. Moreover, table are not so ugly with Bootstrap.

Adding bootstrap to a css styled 'table'

1 Answers

EDIT :