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 ?

Marcadia · Accepted Answer · 2017-11-26 10:46:31Z

2

+50

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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container-fluid">
  <div class="row row-eq-height">
      <div class="box col-md-2 col-lg-2 col-sm-2 col-xs-2">
        Sample bit of text           
      </div>
      <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
      <div class="flex-wrapper">
          <a class="header-light title" id="X" href="http://www.bbc.co.uk">Like Text the quick brown fox jumped over the flat cat with the aplomb of a fit ferile dog like animal</a>
          <span class="description">Description text this is lots of very very very interesting text text</span>
      </div>
    </div>
  </div>
  <div class="row row-eq-height">
      <div class="box col-md-2 col-lg-2 col-sm-2">
        Sample bit of text with 2 rows             
      </div>
      <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
      <div class="flex-wrapper">
          <a class="header-light title" id="X" href="http://www.bbc.co.uk"> this is short!</a>
          <span class="description">Description text</span>
      </div>
    </div>
  </div>
</div>

</body>

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.

edited Nov 26, 2017 at 10:46

answered Nov 25, 2017 at 20:55

Marcadia

5481 gold badge4 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gringogordo Over a year ago

Thanks. Didn't realise how much different bs 4 is from 3. I guess I'll redo the website now but that's probably no bad thing. I inherited the bootstrap code (and haven't done much of it myself) so I can't answer as to why the original is so convoluted although I did notice as I tried to tidy it up things started to fall apart so it may have just been trial and error on the original devs part. I only used display: table as I found it in a different answer and seemed to work until I added some bootstrap back in so I'll try and convert the site to bs 4 and then use your answer. Many thanks.

Marcadia Over a year ago

Bs 4 is easier to use and has many options you may use in the future for potential problems you may encounter. There are little differencies you must pay attention to when you will upgrade to v4, don't hesitate to look the docs, there is a migration guide. Anyway, you're welcome, don't hesitate to upvote tho. :)

Collectives™ on Stack Overflow

Adding bootstrap to a css styled 'table'

1 Answer 1

EDIT :

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT :

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related