-1
\$\begingroup\$

I am using Bootstrap v5.3 to create a card layout, and I want it to be SEO-friendly (see this link for my SEO-friendly criteria).

Below is my card component I wish to optimize and, if possible, to drop some classes from <div> elements for cleaner markup.

I am considering to put all styling inside a style file, which is represented here as style tag. If I will go for that option, then how do I organize these styles?

What are other objective flaws in my markup as you can tell?

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.card-custom {
  width: 400px;
}
</style>
<div class="card-custom rounded-2 shadow-sm d-flex flex-column">
        <img src="https://i.imgur.com/wNabyl4.jpg" class="card-img-top rounded-0" alt="Hello World" />

    <div class="px-3 py-3 d-flex flex-column justify-content-between gap-4 flex-grow-1">
            <div>
                Subheader Line
            </div>

        <div class="text-break flex-grow-1">
            <h3 class="fw-bold fs-4">Card Title</h3>

            Content Content Content of Dynamic Length
        </div>

            <div>
                Footer of Static Length
            </div>
    </div>
</div>

\$\endgroup\$
4
  • 1
    \$\begingroup\$ Which computer science / programming Stack Exchange sites do I post on? \$\endgroup\$
    – BCdotWEB
    Commented Feb 7, 2023 at 13:45
  • \$\begingroup\$ I am going to wait 24 hours to down vote and vote to delete in case improvements are made. I suggest you read A guide to Code Review for Stack Overflow users because our rules are different. We want to see more code so we can do a better review. \$\endgroup\$
    – pacmaninbw ♦
    Commented Feb 7, 2023 at 15:01
  • \$\begingroup\$ Thank you all for tips, I'll clarify my question with more code and better structure. \$\endgroup\$
    – Rusurano
    Commented Feb 7, 2023 at 16:36
  • \$\begingroup\$ What does your bootstrap card component do? It's a layout. What kind of layout? Flexible? Fixed columns? Something else? What are you hoping will be the result of this? \$\endgroup\$
    – mdfst13
    Commented Feb 10, 2023 at 0:12

1 Answer 1

Reset to default
1
\$\begingroup\$

I wish to optimize and, if possible, to drop some classes from <div> elements for cleaner markup

I see one places where two classes can be combined: px-3 py-3 on the <div> under the <div> containing text Subheader Line can be simplified to p-3.

Other than that one possible change might be to use a bootstrap style class name that semantically describes what styles the class contains. If the only style rule in .custom-card is width: 400px then the name could be changed to something like w-400px. If there was a desire to make the width relative to the parent element or the viewport then one of the bootstrap w-* classes could be used instead.

Note: I added class m-2 to the outer <div> in the sample below to add a slight margin around the card but that is not required. I also used the Tidy button to make the indentation consistent

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .w-400px {
    width: 400px;
  }
</style>
<div class="w-400px rounded-2 shadow-sm d-flex flex-column m-2">
  <img src="https://i.imgur.com/wNabyl4.jpg" class="card-img-top rounded-0" alt="Hello World" />

  <div class="p-3 d-flex flex-column justify-content-between gap-4 flex-grow-1">
    <div>
      Subheader Line
    </div>

    <div class="text-break flex-grow-1">
      <h3 class="fw-bold fs-4">Card Title</h3>

      Content Content Content of Dynamic Length
    </div>

    <div>
      Footer of Static Length
    </div>
  </div>
</div>

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.