Does the container in the boot grid respond correctly?

Question

So, I have 3 boxes that should have a specific height and width and set them to bootstrap as children. It looks good in sight:

However, when the window is resized, the boxes move to the left, rather than floating in the middle of this background graphic. In addition, the title text (in yellow) loses its top complement as:

It was thought that responsiveness was exciting, but could not pinpoint it, and I hope some of you can help.

My HTML for them:

<div class="container"> <div class="claimHead col-md-12"> <div class="submitHeader" style="margin-top: 60px; margin-bottom: 60px; margin-left: 30px;"> <h1 style="font-size: 36px;">Claim Submission Tool</h1> <p style="font-size: 18px;">Filing claims has never been easier, it a simple as 1, 2, 3</p> </div> <div id="stepsContainer"> <div class="col-md-4 stepsBox"> <div class="claimSteps" id="stepOne"> <p class="claimStepNumber">1</p> <p class="claimStepTitle">step one</p> <p class="claimStepText">Get started by entering your claim information in the fields below.</p> </div> </div> <div class="col-md-4 stepsBox"> <div class="claimSteps" id="stepTwo"> <p class="claimStepNumber">2</p> <p class="claimStepTitle">step two</p> <p class="claimStepText">Next drag & drop or upload your documentation.</p> </div> </div> <div class="col-md-4 stepsBox"> <div class="claimSteps" id="stepThree"> <p class="claimStepNumber">3</p> <p class="claimStepTitle">step three</p> <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> </div> </div> </div> </div> </div> 

And my css:

 #stepsContainer { text-align: center; } .stepsBox { padding-bottom: 60px; } .claimSteps { padding-top: 40px; width: 335px; height: 285px; background-color: #2dccd3; color: #ffffff; text-align: center; } .claimStepNumber { font-size: 38px; background-color: #ffffff; color: #2dccd3; width: 65px; height: 65px; border-radius: 50%; margin-left: 135px; } .claimStepTitle { color: #ffffff; font-size: 18px; } .claimStepText { text-align: center; margin-left: 33.3%; width: 33.3%; } 

Any ideas on what I can here and where to check? I also use Bootstrap 3 on top of this css, but I don’t see where this causes the fields to shift to the left.

Thank you very much.

Answer 1

Columns move to the left by default and because you use a fixed height / width inside the columns ( .claimSteps ), they have no choice but to align the left as soon as the environment column collapses, since they cannot occupy 100% of the smaller viewport .

The alignment of the header should be related primarily to your HTML structure.

Note that one area you must change is the width of the field you are creating. It is too wide and starts to break / overflow, because it is fixed. If you can reduce it, you should (my examples reflect this, but it can be easily changed to the default width).

A fixed box size also comes into play at about 400 pixels. In the second example, I made the field flexible so that it works correctly in all viewports. See Examples 1 and 2 in viewports under 400px.

Here are some examples that might help.

Example 1 : default setting

 .submitHeader { margin: 60px 0; } .submitHeader h1 { font-size: 36px; } .submitHeader p { font-size: 18px; } .claimSteps { width: 285px; height: 285px; background-color: #2dccd3; color: #ffffff; text-align: center; position: relative; margin: 0 auto; display: table; } .claimStepNumber { margin-top: 40px; font-size: 38px; background-color: #ffffff; color: #2dccd3; width: 55px; height: 55px; border-radius: 50%; position: absolute; display: table-cell; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } .claimStepTitle { color: #ffffff; font-size: 18px; margin-top: 110px; } .claimStepText { text-align: center; margin-left: 33.3%; width: 33.3%; } @media (min-width: 1200px) { .submitHeader { margin: 60px 40px; } } @media (max-width: 991px) { .claimSteps { margin: 30px auto; } .submitHeader { margin-top: 60px; margin-bottom: 0; text-align: center; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="submitHeader"> <h1>Claim Submission Tool</h1> <p>Filing claims has never been easier, it a simple as 1, 2, 3</p> </div> <div class="row"> <div class="col-md-4"> <div class="claimSteps" id="stepOne"> <p class="claimStepNumber">1</p> <p class="claimStepTitle">step one</p> <p class="claimStepText">Get started by entering your claim information in the fields below.</p> </div> </div> <div class="col-md-4"> <div class="claimSteps" id="stepTwo"> <p class="claimStepNumber">2</p> <p class="claimStepTitle">step two</p> <p class="claimStepText">Next drag and drop or upload your documentation.</p> </div> </div> <div class="col-md-4"> <div class="claimSteps" id="stepThree"> <p class="claimStepNumber">3</p> <p class="claimStepTitle">step three</p> <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> </div> </div> </div> </div> 

Example 2 : first installation of Mobile

 .submitHeader { margin: 60px 0; } .submitHeader h1 { font-size: 36px; } .submitHeader p { font-size: 18px; } .claimSteps { width: 285px; height: 285px; background-color: #2dccd3; color: #ffffff; text-align: center; position: relative; margin: 0 auto; display: table; } .claimStepNumber { margin-top: 40px; font-size: 38px; background-color: #ffffff; color: #2dccd3; width: 55px; height: 55px; border-radius: 50%; position: absolute; display: table-cell; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } .claimStepTitle { color: #ffffff; font-size: 18px; margin-top: 110px; } .claimStepText { text-align: center; margin-left: 33.3%; width: 33.3%; } @media (min-width: 1200px) { .submitHeader { margin: 60px 40px; } } @media (max-width: 991px) { .claimSteps { margin: 30px auto; } .submitHeader { margin-top: 60px; margin-bottom: 0; text-align: center; } } @media (max-width: 400px) { /*Color For Demo Only*/ body { background: red; } .claimSteps { width: 100%; height: 100%; padding-bottom: 40px; } } /*Color For Demo Only*/ @media (max-width: 320px) { body { background: lightblue; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="submitHeader"> <h1>Claim Submission Tool</h1> <p>Filing claims has never been easier, it a simple as 1, 2, 3</p> </div> <div class="row"> <div class="col-md-4"> <div class="claimSteps" id="stepOne"> <p class="claimStepNumber">1</p> <p class="claimStepTitle">step one</p> <p class="claimStepText">Get started by entering your claim information in the fields below.</p> </div> </div> <div class="col-md-4"> <div class="claimSteps" id="stepTwo"> <p class="claimStepNumber">2</p> <p class="claimStepTitle">step two</p> <p class="claimStepText">Next drag and drop or upload your documentation.</p> </div> </div> <div class="col-md-4"> <div class="claimSteps" id="stepThree"> <p class="claimStepNumber">3</p> <p class="claimStepTitle">step three</p> <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> </div> </div> </div> </div> 

Example 3 : Text Alignment Example

 .claimSteps { width: 285px; height: 285px; background-color: #2dccd3; color: #ffffff; margin-top: 30px; margin-bottom: 30px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <h1>Claim Submission Tool</h1> <p>Filing claims has never been easier, it a simple as 1, 2, 3</p> <div class="row"> <div id="stepsContainer"> <div class="col-md-4"> <div class="claimSteps"></div> </div> <div class="col-md-4"> <div class="claimSteps"></div> </div> <div class="col-md-4"> <div class="claimSteps"></div> </div> </div> </div> </div> 

Answer 2

You must add class="row" before using class="col-**-**" as usual after class="container" .

Answer 3

Have you tried to separate col-md-12 from these three stepBox ?

I don't see the need to wrap these columns inside the first column, so I would rather finish col-md-12 before the start of #stepsContainer .

Another thing is that your CSS limits the width of claimSteps less than the screen width when the md dot breaks. You should at least at this point change the width property in CSS using a media query .

 @media (max-width: 1199px) { .claimSteps { width: 100%; } } 

That should do it.

Answer 4

By default, the div is displayed as a block , so swim to the left , if you want to set its float in the middle, you must set its display . > inline block and set text-align to center

in your case, you can add inline block mapping to .claimSteps CSS rules

 .claimSteps { padding-top: 40px; width: 335px; height: 285px; background-color: #2dccd3; color: #ffffff; text-align: center; display: inline-block; } 

For the title, you can use padding instead of a field in div.submitHeader

See snippet for full result.

 #stepsContainer { text-align: center; } .stepsBox { padding-bottom: 60px; } .claimSteps { padding-top: 40px; width: 335px; height: 285px; background-color: #2dccd3; color: #ffffff; text-align: center; display: inline-block; } .claimStepNumber { font-size: 38px; background-color: #ffffff; color: #2dccd3; width: 65px; height: 65px; border-radius: 50%; margin-left: 135px; } .claimStepTitle { color: #ffffff; font-size: 18px; } .claimStepText { text-align: center; margin-left: 33.3%; width: 33.3%; } 

 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="claimHead col-md-12"> <div class="submitHeader" style="padding-top: 60px; padding-bottom: 60px; padding-left: 30px;"> <h1 style="font-size: 36px;">Claim Submission Tool</h1> <p style="font-size: 18px;">Filing claims has never been easier, it a simple as 1, 2, 3</p> </div> <div id="stepsContainer"> <div class="col-md-4 stepsBox"> <div class="claimSteps" id="stepOne"> <p class="claimStepNumber">1</p> <p class="claimStepTitle">step one</p> <p class="claimStepText">Get started by entering your claim information in the fields below.</p> </div> </div> <div class="col-md-4 stepsBox"> <div class="claimSteps" id="stepTwo"> <p class="claimStepNumber">2</p> <p class="claimStepTitle">step two</p> <p class="claimStepText">Next drag & drop or upload your documentation.</p> </div> </div> <div class="col-md-4 stepsBox"> <div class="claimSteps" id="stepThree"> <p class="claimStepNumber">3</p> <p class="claimStepTitle">step three</p> <p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p> </div> </div> </div> </div> </div>