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">

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>

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>

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>

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

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

Margarita Potylitsyna @ritumka

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

Comments 2 total