CODEWITHSUNDEEP
htmltwitter-bootstrapcssinput
thesystem
thesystem

Reputation: 604

Bootstrap and CSS' transform

I am trying to make a contact form in the center of a website, but for some reason, Bootstrap and CSS' transform: translate(-50%, -50%); (used for absolute positioning in the center of a website) doesn't play well with each other.

The problem: When both Bootstrap and CSS-transform is applied, the top-line/margin of the input field is removed, making the input field look bugged.

I can remove either the Bootstrap link (HTML line 2) or transform (CSS line 6) and it will look as intended, but I need both Bootstrap (for responsive design) and transform (for center positioning).

JS Fiddle (notice HTML: line 2 and CSS: line 6):

https://jsfiddle.net/t1txvv9d/

Hope anyone know a workaround for this? I would really appreciate help. Thank you.

Upvotes: 1

Views: 5398

Answers (2)

Kostas Siabanis
Kostas Siabanis

Reputation: 3039

You are better off with flex:

body, html {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Fiddle here and more about CSS Flexbox here.

Upvotes: 1

Johannes
Johannes

Reputation: 67776

I would clean up the code a bit: Remove the margin-right: -50%; (has no effect), add position: relative to .container and also add a height or at least a min-height setting to .container (depending what you are up to, a fixed px value or a percentage, which then also requires a height definition for the parent elements)

https://jsfiddle.net/b7Lry34n/1/

Image of JSFIDDLE after comments

Upvotes: 1

Related Questions