Today I started to create a login form with Bootstrap and I have a problem with my form.
I can’t put the image on the right side of the container and in modifying the container with flex, the input boxes have shrunk.
The image is not there because Codepen does not allow me to put the images. how can i have the login form on the left and the image on the right inside the container?
Hey @camcode, love the sketch, definitely helpful and much better than anything I could have drawn
There are three things you need to change here:
Most importantly, the Bootstrap grid system (containers, row, columns) have 12 columns. You currently have your two column elements set to .col-8, so they can never fit on the same line. Try .col-6 instead.
You should put the .col-6 elements in the same .row element. Currently they are in two separate ones. Again, without this change, they will always end up on different lines.
Remove .d-flex the .d-flex.c-container div. By setting that inner container to flex, you’re also setting the default properties justify-content and align-items to “justify-content: flex-start; align-items: stretch”, which is really what is making your layout behave so unexpectedly.