<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Cabin" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="container"> <div class="row item-job-list "> <div class="col-sm-3 col-md-3 block-col block-col-1"> <p class="block-pid block-hdr">132431</p> <p class="block-application block-hdr"> _core_</p> <p class="block-type block-hdr">recurring</p> <p class="block-status block-hdr">pending</p> </div> <div class="col-sm-3 col-md-3 block-col block-col-2"> <p class="block-organization block-hdr">_core_</p> <ul class="block-do-action"> <li class="item-block-application-id">_core_ <a href=""><i class="glyphicon glyphicon-edit"></i></a></li> <li class="item-block-module-id">admin <a href=""><i class="glyphicon glyphicon-edit"></i></a></li> <li class="item-block-class-id">user <a href=""><i class="glyphicon glyphicon-edit"></i></a></li> <li class="item-block-action-id">send_signup_emails <a href=""><i class="glyphicon glyphicon-edit"></i></a> </li> </ul> </div> <div class="col-sm-3 col-md-3 block-col block-col-3"> <p class="block-last-execution block-hdr"> 2016-11-28 14:15 </p> <p class="block-next-execution block-hdr"> 2016-11-29 14:15 <a href=""><i class="glyphicon glyphicon-edit"></i></a> </p> <p class="block-recurring block-hdr"> each 2 minutes <a href=""><i class="glyphicon glyphicon-edit"></i></a> </p> </div> <div class="col-sm-3 col-md-3 block-col block-col-4"> <ul class="block-toolbar"> <li class="btn btn-default btn-sm btn-success"><i class="fa fa-toggle-off"></i> Enabled</li> <li class="btn btn-default btn-sm btn-primary"><i class="fa fa-play"></i> Run</li> <li class="btn btn-default btn-sm"><i class="fa fa-clone"></i> Duplicate</li> <li class="btn btn-default btn-sm"><i class="glyphicon glyphicon-list"></i> History</li> </ul> </div> </div> </div>

.item-job-list { font-family: 'Cabin'; padding: 10px; border: solid 1px silver; } .block-pid::before { content:"PID: "; } .block-application::before { content:"App: "; } .block-type::before { content:"Type: "; } .block-status::before { content:"Status: "; } .block-organization::before { content: "Org: "; } .block-do-action { list-style-type: none; margin-left: 0px; padding-left:0px; } .block-do-action li::before { color: gray; } .item-block-application-id::before { content:"App: "; } .item-block-module-id::before { content: "Mod: "; } .item-block-class-id::before { content: "Class: "; } .item-block-action-id::before { content: "Action: "; } .block-hdr::before { color: gray; } .block-hdr { color: black; } .block-last-execution::before { content: "Last....: "; } .block-next-execution::before { content: "Next....: "; } .block-recurring::before { content: "Interval: "; } .block-toolbar li { min-width: 150px; margin-top: 5px; } .block-col::before { border: 1px solid #888; display: block; padding: 2px; } .block-col-1::before { content: "General"; background-color: #fbb; } .block-col-2::before { content: "Target"; background-color: #bfb; } .block-col-3::before { content: "Schedule"; background-color: #bbf; } .block-col-4::before { content: "Actions"; background-color: #bbb; } .block-col { margin-bottom:20px; padding: 20px; } .block-hdr { margin-top: 10px; } .block-toolbar { margin-top: 10px; } .block-hdr A { position: absolute; right: 10px; } .block-do-action { width: 100%; } .block-do-action A { position: absolute; right: 10px; }