Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to align the header and button on the same line using bootstrap 4

Tags:

css

twitter-bootstrap

I want to position my h3 header and button on the same line 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="get-quote">
    <div class="row">
      <div class="col-md-12">
        <h3 id="quote">IN HOUSE EMBROIDERY AND HEAT TRASNFER</h3> <button type="button" class="pull-right" class="btn btn-primary">Get Quote</button>
      </div>
    </div>
  </div>
</div>
like image 641
Victor Johnson Avatar asked Jun 07 '18 11:06

Victor Johnson

People also ask

How do you align buttons on the same line?

If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.

How do I align a button to the center in Bootstrap 4?

In Bootstrap 4 one should use the text-center class to align inline-blocks. NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what . text-center applies.

How do I align a button to the right in Bootstrap?

Bootstrap allows us to align elements by using the utility class float. As we want to align the button to the right side of the text box, we have to use the float-right class.

How do I place a button side by side in Bootstrap?

You can use an out div with a class btn-group . This helps to align the buttons horizontally. Using col-md-6 for each button div can make the buttons missaligned with unwanted space in between.

2 Answers

You can just use two .col-'s, to place them on one line.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
    <div class="get-quote">
        <div class="row">
            <div class="col-sm-10 col-12">
                <h3 id="quote">IN HOUSE EMBROIDERY AND HEAT TRASNFER</h3>
            </div>
            <div class="col-sm-2 col-12">
                <button type="button" class="btn btn-primary pull-right">Get Quote</button>
            </div>
        </div>
    </div>
</div>
like image 76
Red Avatar answered Oct 26 '22 03:10

Red

Add d-flex class on col-md-12 div.

Also add ml-auto on button to right align the button

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="get-quote">
    <div class="row">
      <div class="col-md-12 d-flex">
        <h3 id="quote">IN HOUSE EMBROIDERY AND HEAT TRASNFER</h3> 
       <button type="button" class="btn btn-primary ml-auto">Get Quote</button>
      </div>
    </div>
  </div>
</div>
like image 45
Nandita Sharma Avatar answered Oct 26 '22 03:10

Nandita Sharma
Sign in to Comment

Related questions

100vh results in scroll bar?
Disable Zoom effect on Hover for Mobile devices in elevateZoom
Html for put a label in bottom of an image
Understanding flex-grow
Jquery UI draggable doesn't resize other DIVs
How to only change left padding in javafx css
Spacing between flex elements?
Border-radius disappears with overflow rule
Chrome Animations button missing
Overwriting styles from Bootstrap in an angular2 component-stylesheet
change Google Material Icon on hover with only html/css
Flexed child with overflow respects parent's max-height in Chrome, not in Firefox
Set Leaflet Overlay Off in the Layer Control
Why do display: block and display: flex render the same element with a different height?
Pixelated image downscaling in Microsoft Edge
Angular 2 ngClass conditional with data?
How to use cards with Bootstrap 4 on multiple line with fixed size?
bootstrap 4 change color of nav-pill active
Passing parameters to css animation
Bootstrap 4 Modal Slide from Left

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!