html, css, bootstrap

Community feedback

• 

  Somraj Mukherjee•100

  @iamsomraj

  Posted about 2 years 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.

  12
• 

  Gabriel Lira•170

  @gabrieltrt

  Posted about 2 years 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.

  01