Changing class for subsequent rows

bootstrap grid
bootstrap offset-right
container-fluid
bootstrap container-fluid
bootstrap flex
bootstrap 4 breakpoints
bootstrap grid examples
bootstrap row height

I have this piece of code regarding a carousel. I need the first card to have the "active" class but not the following ones or the carousel wont slide. How can i do that?

Here's my code...

$sql = "select wine.wine_name, wine.id, wine.wine_img,
region.region_name, winetype.winetype_name from wine, region, winetype
where wine.region_id = region.id and wine.winetype_id = winetype.id
and sponsored = 1;";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo '<div class="carousel-item col-md-4 active">
      <div class="card align-items-center">
        <img class="card-img-top img-fluid " src='.$row["wine_img"].' alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title">'.$row["wine_name"].'</h4>
          <p class="card-text">'.$row["winetype_name"].' - '.$row["region_name"].'</p>
        </div>
      </div>
    </div>';
  }
} else {
  echo "ERRO!";
}

you can use a counter to set the active class.

$result = $conn->query($sql);
if ($result->num_rows > 0) {
  // output data of each row
  $count_results = 0;
  while($row = $result->fetch_assoc()) {
    echo '<div class="carousel-item col-md-4 ' . ($count_results == 0 ? 'active' : '') . '">
      <div class="card align-items-center">
        <img class="card-img-top img-fluid " src='.$row["wine_img"].' alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title">'.$row["wine_name"].'</h4>
          <p class="card-text">'.$row["winetype_name"].' - '.$row["region_name"].'</p>
        </div>
      </div>
    </div>';
    $count_results++;
  }
} else {
  echo "ERRO!";
}

Grid system � Bootstrap, <div class="container"> <div class="row"> <div class="col-sm"> One of three This is because the viewport width is in pixels and does not change with the font size. div> <div class="col-6">.col-6<br>Subsequent columns continue along the� Yes it works to change the class of multiple columns to numeric, but it does not work in reverse (to change the class of multiple columns to factor). If you use indices you need unlist() and when applied to columns with characters it unlists every single character, which makes it not work any more when putting the output back into stats[,i] .

You could just have a field with the extra class part set to active and then reset it at the end of the loop...

  // output data of each row
  $class = ' active';
  while($row = $result->fetch_assoc()) {
    echo '<div class="carousel-item col-md-4' .$class. '">
      <div class="card align-items-center">
        <img class="card-img-top img-fluid " src='.$row["wine_img"].' alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title">'.$row["wine_name"].'</h4>
          <p class="card-text">'.$row["winetype_name"].' - '.$row["region_name"].'</p>
        </div>
      </div>
    </div>';
    $class = '';
  }

Row Class Properties, In this section, we discuss the Row class properties. the row number of the row being hidden, and any subsequent rows, changes as a result of hiding a row. The DataGridViewCellStyle class lets you share style information across multiple DataGridView cells, rows, columns, and row or column headers, avoiding the memory requirements of setting style properties on individual cells.

This should do the trick:

while($row = $result->fetch_assoc()) {
    $active = isset($active) ? '' : 'active';

    echo '<div class="carousel-item col-md-4 ' . $active . '">
    ...
}

The variable $active will only be unset (undefined or null) on the first iteration. Then, on the other iterations, the variable will be defined and not null (since it's an empty string) so then we simply set it as an empty string again.

How to change column to row on small display in Bootstrap 4 , If the sum of columns for any given row exceeds 12, it will be automatically shifted to the next row. Available classes and screens: Name, Class� Changing the position of rows and columns in a matrixMove element inside a listElegant operations on matrix rows and columnsSort matrix by columns and rows without changing themHow to merge Datasets representing matrices with named rows/columns?Question about the matrix operationChanging the first row of a matrix; subsequent rows depend on the first rowChange entire column of matrix using its

I would make a counter and simply check if you need to add the class. Of course, since you only need it once, you can use a boolean.

<?php
$sql = "select wine.wine_name, wine.id, wine.wine_img,
region.region_name, winetype.winetype_name from wine, region, winetype
where wine.region_id = region.id and wine.winetype_id = winetype.id
and sponsored = 1;";

$result = $conn->query($sql);
?>
<?php if ($result->num_rows > 0): ?>
  <?php $first = true; ?>
  <?php while ($row = $result->fetch_assoc()): ?>
  <div class="carousel-item col-md-4 <?= $first ? 'active' : '' ?>">
    <div class="card align-items-center">
      <img class="card-img-top img-fluid " src=<?= $row["wine_img"] ?> alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title"><?= $row["wine_name"] ?></h4>
        <p class="card-text"><?= $row["winetype_name"] ?> - <?= $row["region_name"] ?></p>
      </div>
    </div>
  </div>
  <?php $first = false; ?>
  <? endwhile; ?>
<?php else: ?>
  <span>Error!</span>
<?php endif; ?>

I've also taken the liberty of taking all of your HTML out of the single echo. This is much cleaner :)

Excel 2016 - How to Edit Cells, Rows, Columns , In the old days of pencil and paper or a typewriter, making changes to anything was a hassle. You had to use that messy white out fluid. Or even worse, take an� In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%.

Analyzing 12-tone music – Open Music Theory, A row is an ordered set of the twelve pitch classes of the chromatic scale. at the beginning of the piece, any subsequent row that is an exact transposition of that row is prime. Reversing pitch classes changes the direction of each interval. This is an example of parallel columns. Parallel columns with block protect keep each row of columns together. If a column in one row becomes so long that it moves across a page break, the entire row moves to the next page.

Zend_Db_Table - Manual - Documentation, The solution also includes a class that implements the � Row Data Gateway pattern database adapter for all subsequent instances of Tables in your application. This method takes two arguments: an associative array of columns to change� To sort entire rows or columns relative to each other, use the sortrows function. For example, sort the rows of A in ascending order according to the elements in the first column. The positions of the rows change, but the order of the elements in each row are preserved.

Google Visualization API Reference | Charts, setRows() to change the displayed set of rows in a visualization. filters - An array of objects that describe an acceptable cell value. A row index is returned by this� What is the difference between A_ROWS (actual rows) and E-Rows (CBO estimated rows). Answer: During parsing of the SQL statement, Oracle consults the optimizer statistics in the data dictionary to come-up with estimates for the number of rows that will be returned by a particular step in the execution plan (the cardinality).

Comments
  • Thanks a lot to all of you for trying to help me. Got it working with Noémie suggestion.
  • PHP doesn't use var for defining variables though so this would actually throw a syntax error.