DEV Community

Cover image for Organize your layout by using <div> elements and Bootstrap 🤹
Margarita Potylitsyna
Margarita Potylitsyna

Posted on • Edited on

1 1

Organize your layout by using <div> elements and Bootstrap 🤹

Here are some takeaways I got while working on my Capstone project at DPI:

1. First of all, connect Bootstrap CSS framework to your app. Add the following line of code to your application.html.erb or use partials if you'd like.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
Enter fullscreen mode Exit fullscreen mode

Connect Bootstrap CSS to your app

Learn more about Bootstrap and why it's cool here.

2. The best advice I've ever gotten is, 'Always make the invisible visible'
If you don't understand how your layout works add border attribute to your <div> class. Like this:

<div class="border">

You can always remove it later but it will make your life much easier.

3. To arrange objects horizontally use row class for the main <div> and col for the nested <div>s:

<div class=”row”>
  <div class=”col”></div>
  <div class=”col”></div>
  <div class=”col”></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Arrange objects horizontally

4. To make your <div> elements rearrange vertically on smaller screens, add the responsive column classes col-12 and col-md to the nested <div> elements:

<div class=”row”>
  <div class=”col-12 col-md></div>
  <div class=”col-12 col-md></div>
  <div class=”col-12 col-md></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Rearrange objects vertically

5. To make your <footer> fixed at the bottom of the page layout add bd-footer to your <footer> class. Like this:

<footer class="bd-footer"></footer>

5. To make the bottom <div> stick to the <footer> use the following structure:

<body class="d-flex flex-column min-vh-100">

  <main class="flex-grow-1 d-flex flex-column justify-content-between">
    <div class="content-top"></div>
    <div class="content-bottom"></div>
  </main>

  <footer class="bd-footer"></footer>

</body>
Enter fullscreen mode Exit fullscreen mode

It's useful if you need to make sure your elements are positioned correctly on different screens.

Sticked bottom <div>

Sticked bottom <div>

That's it for now. If you have any suggestions or need help, feel free to reach out. Happy coding! 👩‍💻

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (2)

Collapse
 
bibimbop123 profile image
Brian Kim

great article about bootstrap tips! Thanks for sharing Margo!

Collapse
 
ritumka profile image
Margarita Potylitsyna

Sure Brian! I'm gonna write more bc I got a lot of takeaways. This project was extremely helpful 🤩

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay