Jump to content

Needs some help horizontally centering div using the w3.css bootstrap


Handler
 Share

Recommended Posts

Remove w3-card-4 and w3-half classes from the element.

Give it its own class name, such as "important-dates" and then apply some CSS to that.

.important-dates {
    margin: 0 auto;
    max-width: 860px;
}
Link to comment
Share on other sites

 

Remove w3-card-4 and w3-half classes from the element.

Give it its own class name, such as "important-dates" and then apply some CSS to that.

.important-dates {
    margin: 0 auto;
    max-width: 860px;
}

 

Thanks man!

 

I actually used what you gave me but ended up only removing the w3-half. While I like the w3.css thing for it's simplicity of use it lacks in areas of centering.

Link to comment
Share on other sites

Is this the layout you required?

<div class="w3-card-4 w3-margin">            
  <div class="w3-container w3-amber">
                <h2>Important Dates Input</h2>
            </div>
        <div class="w3-container">

<!--form content here-->

</div>
</div>

Its is difficult to tell if you want blue form background? but since it would hide blue text I assumed it was not.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...