CODEWITHSUNDEEP
htmlcsstwitter-bootstraplaravel-5
RidableCthulu
RidableCthulu

Reputation: 471

Bootstrap element design

I hope the title is not misleading and if any mods have a better idea for it feel free to change it!

I have a design I want to make with Boostrap 3 and it looks like this (sorry for the bad drawing :) ) enter image description here

I managed to do it with tables using the following code:

<div class="row">
    <table class="table borderless">
        <tr>
            <td rowspan="2" class="bandImage"><img src="{{ asset('img/bands') }}/{{$band->image}}" class="bandImage" /></td>
            <td><a href="{{ action('BandsController@show', $band->id) }}"><h4>{{$band->band_name}}</h4></a></td>
        </tr>
        <tr>
            <td><p>{!! nl2br(e($band->description)) !!}</p></td>
        </tr>
    </table>
    <hr>
</div>

And the output looks close to what I want to, but what I want to know, is it good practice using tables for this or is there something better in Bootstrap which I could use for this.

Here's what it looks like: enter image description here

Upvotes: 1

Views: 66

Answers (3)

MoLow
MoLow

Reputation: 3084

this should work:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-sm-4 col-xs-4">Image</div>
  <div class="col-sm-8">
    <div class="col-sm-12">Header</div>
    <div class="col-sm-12">Text</div>
  </div>

</div>

Upvotes: 0

Shehary
Shehary

Reputation: 9992

There is Media object components in bootstrap for what you are trying to achieve with table formatting

Media object

<div class="media">
    <a class="pull-left" href="#">
        <img src="https://pbs.twimg.com/profile_images/596119640813645824/NFVBMns-.png" class="media-object" data-src="holder.js/64x64" style="height: 300px;width: 300px">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>

Fiddle Example

Upvotes: 3

vanburen
vanburen

Reputation: 21653

Look into bootstrap media objects. Docs are the best place to start.

Upvotes: 2

Related Questions