html, css, bootstrap

Community feedback

• 

  Somraj Mukherjee•100

  @iamsomrajPosted over 1 year ago

  Hi,

  To center a container both horizontally and vertically using flexbox in CSS, you can apply the following styles to the container:

  .container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 100vh; /* Set the container height to the full viewport height for vertical centering */
  }
  

  By using display: flex, the child elements inside the container will be automatically centered both horizontally and vertically.

  This approach centers the container's content regardless of screen size, making it responsive to various devices.

  I can see that you have used bootstrap. Personally, I would highly recommend using Tailwind. Let me know if you need any help.

  1

  ---

  

  BossArifSanjaya•20

  @BossArifSanjayaPosted over 1 year ago

  @iamsomraj thanks for the advice, this is very useful for me

  1

  

  Somraj Mukherjee•100

  @iamsomrajPosted over 1 year ago

  Thank you, @BossArifSanjaya, for your prompt response. If you found my reply helpful, I kindly ask for an upvote. This will assist others with similar doubts in discovering the solution more easily.

  0
• 

  Gabriel Lira•170

  @gabrieltrtPosted over 1 year ago

  Friend, in the mobile version you need to use the flex-direction:column; property in the main container.

  And when you do media queries, you must change the main container's flex-direction property to Row instead of column.

  in short, study more about flexbox! he will solve pretty much everything in this challenge.

  0

  ---

  

  BossArifSanjaya•20

  @BossArifSanjayaPosted over 1 year ago

  @gabrieltrt thank you for advice....

  1