Align button to bottom of div in desktop and left of div in mobile

up vote
1
down vote

favorite

I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).

enter image description here

Codepen

I was able to do this by adding the following class to button:

.btn-bottom {

    position: absolute;

    top: 130px;

}

Unfortunately, doing so made the button disappear entirely on mobile:
enter image description here

How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?

<div class="padding">

    <div class="container">

        <div class="row">

            <h3 class="text-center">Contact Us</h3>

            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

        </div>

        <div class="row">

            <div class="col-md-8 col-md-offset-2">

                <div class="col-md-4">

                    <label for="inputname">Name</label>

                    <input type="text" class="form-control" id="inputname">

                </div>

                <div class="col-md-4">

                    <label for="email">E-mail</label>

                    <input type="text" class="form-control" id="email">

                </div>

                <div class="col-md-4">

                    <label for="organization">Organization</label>

                    <input type="text" class="form-control" id="organization">

                </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-8 col-md-offset-2">

                    <div class="col-md-8">

                        <label for="message">Message</label>

                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



                    </div>

                    <div class="col-md-4">



                        <button type="submit" class="btn btn-primary">Submit</button>

                </div>

                </div>

            </div>

        </div>

        <hr />

        </div>

edited Nov 21 at 16:07

asked Nov 21 at 15:18

extensionhelp

2006

It looks like you're using Bootstrap 3, not Bootstrap 4.
– Zim
Nov 21 at 15:30

can you run this code with your bootstrap in something like codepen? that way we can see how its running
– Riskbreaker
Nov 21 at 16:01

@Riskbreaker I've added a link above, thanks for suggestion!
– extensionhelp
Nov 21 at 16:07

add a comment |

up vote
1
down vote

favorite

I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).

enter image description here

Codepen

I was able to do this by adding the following class to button:

.btn-bottom {

    position: absolute;

    top: 130px;

}

Unfortunately, doing so made the button disappear entirely on mobile:
enter image description here

How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?

<div class="padding">

    <div class="container">

        <div class="row">

            <h3 class="text-center">Contact Us</h3>

            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

        </div>

        <div class="row">

            <div class="col-md-8 col-md-offset-2">

                <div class="col-md-4">

                    <label for="inputname">Name</label>

                    <input type="text" class="form-control" id="inputname">

                </div>

                <div class="col-md-4">

                    <label for="email">E-mail</label>

                    <input type="text" class="form-control" id="email">

                </div>

                <div class="col-md-4">

                    <label for="organization">Organization</label>

                    <input type="text" class="form-control" id="organization">

                </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-8 col-md-offset-2">

                    <div class="col-md-8">

                        <label for="message">Message</label>

                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



                    </div>

                    <div class="col-md-4">



                        <button type="submit" class="btn btn-primary">Submit</button>

                </div>

                </div>

            </div>

        </div>

        <hr />

        </div>

edited Nov 21 at 16:07

asked Nov 21 at 15:18

extensionhelp

2006

It looks like you're using Bootstrap 3, not Bootstrap 4.
– Zim
Nov 21 at 15:30

can you run this code with your bootstrap in something like codepen? that way we can see how its running
– Riskbreaker
Nov 21 at 16:01

@Riskbreaker I've added a link above, thanks for suggestion!
– extensionhelp
Nov 21 at 16:07

add a comment |

up vote
1
down vote

favorite

I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).

enter image description here

Codepen

I was able to do this by adding the following class to button:

.btn-bottom {

    position: absolute;

    top: 130px;

}

Unfortunately, doing so made the button disappear entirely on mobile:
enter image description here

How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?

<div class="padding">

    <div class="container">

        <div class="row">

            <h3 class="text-center">Contact Us</h3>

            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

        </div>

        <div class="row">

            <div class="col-md-8 col-md-offset-2">

                <div class="col-md-4">

                    <label for="inputname">Name</label>

                    <input type="text" class="form-control" id="inputname">

                </div>

                <div class="col-md-4">

                    <label for="email">E-mail</label>

                    <input type="text" class="form-control" id="email">

                </div>

                <div class="col-md-4">

                    <label for="organization">Organization</label>

                    <input type="text" class="form-control" id="organization">

                </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-8 col-md-offset-2">

                    <div class="col-md-8">

                        <label for="message">Message</label>

                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



                    </div>

                    <div class="col-md-4">



                        <button type="submit" class="btn btn-primary">Submit</button>

                </div>

                </div>

            </div>

        </div>

        <hr />

        </div>

edited Nov 21 at 16:07

asked Nov 21 at 15:18

extensionhelp

2006

I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).

enter image description here

Codepen

I was able to do this by adding the following class to button:

.btn-bottom {

    position: absolute;

    top: 130px;

}

Unfortunately, doing so made the button disappear entirely on mobile:
enter image description here

How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?

<div class="padding">

    <div class="container">

        <div class="row">

            <h3 class="text-center">Contact Us</h3>

            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

        </div>

        <div class="row">

            <div class="col-md-8 col-md-offset-2">

                <div class="col-md-4">

                    <label for="inputname">Name</label>

                    <input type="text" class="form-control" id="inputname">

                </div>

                <div class="col-md-4">

                    <label for="email">E-mail</label>

                    <input type="text" class="form-control" id="email">

                </div>

                <div class="col-md-4">

                    <label for="organization">Organization</label>

                    <input type="text" class="form-control" id="organization">

                </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-8 col-md-offset-2">

                    <div class="col-md-8">

                        <label for="message">Message</label>

                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



                    </div>

                    <div class="col-md-4">



                        <button type="submit" class="btn btn-primary">Submit</button>

                </div>

                </div>

            </div>

        </div>

        <hr />

        </div>

css twitter-bootstrap-3

edited Nov 21 at 16:07

asked Nov 21 at 15:18

extensionhelp

2006

edited Nov 21 at 16:07

asked Nov 21 at 15:18

extensionhelp

2006

edited Nov 21 at 16:07

asked Nov 21 at 15:18

extensionhelp

2006

asked Nov 21 at 15:18

extensionhelp

2006

asked Nov 21 at 15:18

extensionhelp

2006

It looks like you're using Bootstrap 3, not Bootstrap 4.
– Zim
Nov 21 at 15:30

can you run this code with your bootstrap in something like codepen? that way we can see how its running
– Riskbreaker
Nov 21 at 16:01

@Riskbreaker I've added a link above, thanks for suggestion!
– extensionhelp
Nov 21 at 16:07

add a comment |

It looks like you're using Bootstrap 3, not Bootstrap 4.
– Zim
Nov 21 at 15:30

can you run this code with your bootstrap in something like codepen? that way we can see how its running
– Riskbreaker
Nov 21 at 16:01

@Riskbreaker I've added a link above, thanks for suggestion!
– extensionhelp
Nov 21 at 16:07

It looks like you're using Bootstrap 3, not Bootstrap 4.
– Zim
Nov 21 at 15:30

can you run this code with your bootstrap in something like codepen? that way we can see how its running
– Riskbreaker
Nov 21 at 16:01

@Riskbreaker I've added a link above, thanks for suggestion!
– extensionhelp
Nov 21 at 16:07

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

You could set the columns of the elements containing the textarea and the button to be display: inline-block (you would have to set float: none for this to work) and then use vertical-align: bottom to align the elements to the bottom of the line that they're siting on.

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

answered Nov 21 at 18:04

Danny

825210

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415182%2falign-button-to-bottom-of-div-in-desktop-and-left-of-div-in-mobile%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

answered Nov 21 at 18:04

Danny

825210

add a comment |

up vote
1
down vote

accepted

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

answered Nov 21 at 18:04

Danny

825210

add a comment |

up vote
1
down vote

accepted

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

answered Nov 21 at 18:04

Danny

825210

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

body {

  font-size: 12px !important;

  font-family: 'Roboto Condensed', sans-serif !important;

  font-weight: 400 !important;

}



.title-lighter {

  font-family: 'Roboto', Arial, Helvetica, sans-serif;

  color: #737373;

}



.centering {

  float: none;

  margin: 0 auto;

}



.btn-centering {

  width: 90% !important;

  margin-left: 5% !important;

  margin-bottom: 5px !important;

}



.padding {

  padding: 80px 0;

}



.contact-form {

  background: #fff;

  margin-top: 10%;

  margin-bottom: 5%;

  width: 70%;

}



.contact-form .form-control {

  border-radius: 1rem;

}



.contact-form form {

  padding: 14%;

}



.contact-form form .row {

  margin-bottom: -7%;

}



.contact-form h3 {

  margin-bottom: 8%;

  margin-top: -10%;

  text-align: center;

  color: #0062cc;

}



.contact-form .btnContact {

  width: 50%;

  border: none;

  border-radius: 1rem;

  padding: 1.5%;

  background: #dc3545;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

}



.btnContactSubmit {

  width: 50%;

  border-radius: 1rem;

  padding: 1.5%;

  color: #fff;

  background-color: #0062cc;

  border: none;

  cursor: pointer;

}



.centered-row {

  text-align: center;

}



.btn-bottom {

  display: table-cell;

  vertical-align: bottom;

}



.box {

  display: table !important;

  width: 100%;

  height: 100%;

}



@media (min-width: 992px)

{

.row--mod .col-md-8.col-md-offset-2 > * {

  float: none;

  display: inline-block;

  vertical-align: bottom;

}



.row--mod .col-md-8.col-md-offset-2> :first-child {

  margin-right: -4px;

  width: 66.6667%;

  

}

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="padding">

  <div class="container">

    <div class="row">

      <h3 class="text-center">Contact Us</h3>

      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>

    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-4">

          <label for="inputname">Name</label>

          <input type="text" class="form-control" id="inputname">

        </div>

        <div class="col-md-4">

          <label for="email">E-mail</label>

          <input type="text" class="form-control" id="email">

        </div>

        <div class="col-md-4">

          <label for="organization">Organization</label>

          <input type="text" class="form-control" id="organization">

        </div>

      </div>

    </div>

    <div class="row row--mod">

      <div class="col-md-8 col-md-offset-2">

        <div class="col-md-8">

          <label for="message">Message</label>

          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>



        </div>

        <div class="col-md-4">



          <button type="submit" class="btn btn-primary">Submit</button>

        </div>

      </div>

    </div>

  </div>

  <hr />

</div>

answered Nov 21 at 18:04

Danny

825210

answered Nov 21 at 18:04

Danny

825210

answered Nov 21 at 18:04

Danny

825210

answered Nov 21 at 18:04

Danny

825210

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl