troubleshooting Question

Could you point how to adjust this code to present Bootstrap cards in lines/ columns as needed ?

Avatar of Eduardo Fuerte
Eduardo FuerteFlag for Brazil asked on
HTMLPHPLaravelBootstrap
21 Comments1 Solution140 ViewsLast Modified:
Hi Experts


Could you point how to adjust this code to present Bootstrap cards in lines/ columns as needed ?

Accordingly with:

<div class="container">
	<div class="row-fluid ">
	@foreach ($campaigns as $campaign)
		<div class="col-sm-4 ">
			
			<div class="card-columns-fluid">
				<div class="card  bg-light" style = "width: 22rem; " >
					<!--img class="card-img-top"  src=" <?php //echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap"-->

					<div class="card-body">
						<h5 class="card-title"><b>{{$campaign->CampaignID}}">{{$campaign->CampaignName}}</b></h5>
					</div>
				</div>
			</div>
			
			
		</div>
	@endforeach
	</div>
</div> 


Produces this result:
img003

What is needed:
img001

What I already get with this code:

   
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
</style>



@extends('layouts.app')

@section('content')

@include('layouts.breadcrumbs',['breadcrumb'=>['Ferramenta de e-mail','Novo e-mail marketing']])
@include('layouts.steps',['step'=>1])

        <!--/Inicio Conteudo -->
        <div class="row">        
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 titSelecioneNovo">Selecione como você deseja criar o seu E-mail Marketing</div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
            <div class="col-lg-12 col-md-4 col-sm-12 col-xs-12 text-center" style="margin-bottom: 15px;">
                <span class="text-uppercase campanhainterno">
                    Por favor, selecione a campanha para ver os dados relacionados
                </span>
                
                
                <!--
                <select id="CampaignID" class="btn btn-default campanha" style="margin-left: 15px; display: inline-block !important;">
  
                    <option value="0">Selecione uma campanha</option>
   
                    @foreach ($campaigns as $campaign)
                    <option value="{{$campaign->CampaignID}}">{{$campaign->CampaignName}}</option>
                    @endforeach
  
                </select-->

            
             @for ($i = 0; $i < count($campaigns) -1 ; $i++)   

  
                <div class="row">
                  <div class="column">
                    <div class="card">
                      <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                  
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                
                
                  <div class="column">
                    <div class="card">
                      <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                  
                
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                  
                  <div class="column">
                    <div class="card">
                       <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                  
              
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                  
                  <div class="column">
                    <div class="card">
                       <h3>{{$campaigns[$i]->CampaignName}}</h3>
                      <p>Some text</p>
                      <p>Some text</p>
                    </div>
                  </div>
                </div>
                
            
                <?php
                    if($i < count($campaigns) -1)
                      $i++;
                   else
                      break;
                ?>
                
             @endfor
  
             
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"></div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <a href="javascript:void(0);">
                    <div class="btBotaoGenerico"><button type="button" class="btn btn-block btBotaoGenerico" onclick="javascript:home.NewMailing();"><i class="fas fa-file fa-7x" aria-hidden="true"></i><br><br>Em branco</button></div>
                </a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <a href="javascript:void(0);" onclick="javascript: home.loadTemplatesToUse('CampaignID');">
                    <div class="btBotaoGenerico"><button type="button" class="btn btn-block btBotaoGenerico"><i class="fas fa-folder fa-7x" aria-hidden="true"></i><br><br>A partir de um modelo salvo</button></div>
                </a>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"></div>
        </div>
    </div>
    {{ csrf_field() }}
    <!-- Modal -->

    <div class="modal fade" id="ModalTemplates" tabindex="-1" role="dialog" aria-labelledby="myModalTemplates">
    <script src="{{ asset('js/mailing/Mailing.Home.js').'?v='.md5(uniqid()) }}"></script>

@stop


 img005
Closer than I need visually, but not yet good.

My dificulty is in how to make the cards functional and

Thanks in advance
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 21 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 21 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros