0

I am new to twitter bootstrap, i am trying to align the apex command button to centre of the page ,, i tried several ways but it is not working for me.

My code is below

<apex:page standardController="Position__c" standardStylesheets="false" sidebar="false"  showheader="false" extensions="PositionExt">

  <head> 
    <title>Create New Position</title>
    <!--
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"/>
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap/js/bootstrap.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap/js/bootstrap.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.min.css')}"/>

    <style type="text/css"><!-- Spacing for the Nav bar -->
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
  </head>

  <div class="container">
    <apex:form >
      <apex:sectionHeader title="Position" />
      <apex:pageBlock title="">
        <apex:pageMessages ></apex:pageMessages>
        <apex:pageblocksection title="Information" columns="2" >
          <apex:inputField value="{!pos.Name}" required="true"/>
          <apex:inputField value="{!pos.Category__c}"/>
          <apex:inputField value="{!pos.Closing_Date__c}"/>
          <apex:inputField value="{!pos.Description__c}"/>
          <apex:inputField value="{!pos.Posting_URL__c}"/>    
          <apex:inputField value="{!pos.Status__c}" />
          <apex:inputText value="{!pos.Title__c}" id="sts" />
        </apex:pageblocksection>
        <apex:pageBlockbuttons >
        <div class="row">
           <!-- <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Save" /> -->
            <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Save" />
           </div>
        </apex:pageBlockbuttons>
      </apex:pageBlock> 
    </apex:form>
   </div>
</apex:page>
0

Try with code below and let me know if it works.

<apex:page standardController="Position__c" standardStylesheets="false" sidebar="false"  showheader="false" extensions="PositionExt">

  <head> 
    <title>Create New Position</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>


    <style type="text/css"><!-- Spacing for the Nav bar -->
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
        html, body, .container-table {
        height: 100%;
        }
        .container-table {
        display: table;
        }
        .vertical-center-row {
        display: table-cell;
        vertical-align: middle;
        }
    </style>

    <script type="text/javascript">
         $(document).ready(function() {
             $('div.pbHeader > table, div.pbBottomButtons > table').css('width','100%');
             $('div.pbBottomButtons > table > tbody > tr > td.pbTitle').addClass('hidden');
          });
    </script>
  </head>

  <div class="container container-table">
    <apex:form >
      <apex:sectionHeader title="Position" />
      <apex:pageBlock title="">
        <apex:pageMessages ></apex:pageMessages>
        <apex:pageblocksection title="Information" columns="2" >
         <apex:inputField value="{!pos.Name}" required="true"/>
          <apex:inputField value="{!pos.Category__c}"/>
          <apex:inputField value="{!pos.Closing_Date__c}"/>
          <apex:inputField value="{!pos.Description__c}"/>
          <apex:inputField value="{!pos.Posting_URL__c}"/>    
          <apex:inputField value="{!pos.Status__c}" />
          <apex:inputText value="{!pos.Title__c}" id="sts" />
        </apex:pageblocksection>
        <apex:pageBlockbuttons >
        <div class="row">
            <div class="text-center col-md-4 col-md-offset-4">
           <!-- <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Save" /> -->
                <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Save" />
            </div>
         </div>
        </apex:pageBlockbuttons>
      </apex:pageBlock> 
    </apex:form>
   </div>
</apex:page>

P.S. Remember to change the links at the top of the page that I added for JQuery and Bootstrap with your Static Resources links once you are done with testing.

Also, you don't have to add both minified (bootstrap.min.js) and unminified files (bootstrap.js) - normally you would use unminified versions (the ones without min in their name) during development for easier debugging, and then when you are ready to deploy your solution you would change to minified versions of the files, since those ones don't have unnecessary spaces in them and are lighter on the bandwidth.

0
0

Bootstrap has style class center-block which looks perfect for your purpose.

   <div class="row center-block">
        <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Save" />
   </div>
1
  • Thanks for your Help, But even after using above code also still the same behaviour. Feb 6 '16 at 15:47
0

Give the div a class ex - centerCmdBtn

<div class="centerCmdBtn"></div>

Then write css as;

    .centerCmdBtn{
     float: none;
     margin-left: auto;
     margin-right: auto;
     }

This custom class definition has to come after the bootstrap css inclusion. Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.