Tips for aligning content vertically in bootstrap 4

Looking to vertically center content in Bootstrap 4?

<div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-6 align-middle">
                        <h1 class="about-title">Need to connect with reliable moving companies?</h1>
                        <p class="about-para">Discover which moving companies are the right fit for your move within minutes.</p>
                    </div>
                    <div class="col-5 align-middle">
                        <div class="input-group">
                            <div class="form-outline">
                                <input id="search-focus" placeholder="Enter your zip code" type="search" class="form-control">
                            </div>
                            <button type="button" class="btn btn-primary">
                                Get Quotes
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I'm looking to vertically center this content

cssbootstrap-4

Answer №1

For a solution, you can experiment with using .align-items-center.

<head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="264449495255525447566613081608160b4443524714">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<div class="container">
    <div class="content">
        <div class="row align-items-center">
            <div class="col-6">
                <h1 class="about-title">Looking to connect with reliable moving companies?</h1>
                <p class="about-para">Discover which moving companies are a good fit for your relocation in just a few minutes.
                </p>
            </div>
            <div class="col-5 align-middle">
                <div class="input-group">
                    <div class="form-outline">
                        <input id="search-focus" placeholder="Your postal code" type="search" class="foxm-control">
                    </div>
                    <button type="button" class="btn btn-primary">
                                Receive quotes
                            </button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №3

  • When it comes to working with Bootstrap alone, the container height plays a crucial role. It should ideally be equal to your content height in order to ensure proper alignment.
  • To vertically align the content within the container, set the container's height to 100% of the viewport height (e.g., height: 100vh).
  • After setting the height, you can make use of Bootstrap's flexbox classes on that particular container.
    1. d-flex - to enable display:flex property.
    1. align-items-center - to vertically center-align the content.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex align-items-center" style="height:100vh;">
  <div class="content">
    <div class="row">
      <div class="col-6 align-middle">
        <h1 class="about-title">Looking to connect with reliable moving companies?</h1>
        <p class="about-para">Discover which moving companies suit your needs within minutes.</p>
      </div>
      <div class="col-5 align-middle">
        <div class="input-group">
          <div class="form-outline">
            <input id="search-focus" placeholder="Enter your zip code" type="search" class="form-control">
          </div>
          <button type="button" class="btn btn-primary">
                                Receive Quotes
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges encountered with the css dropdown menu when hovering over li elements

Occasionally, I encounter a problem with my menu. Hovering over the "produkter" menu item should trigger a submenu to appear. Most of the time, I am able to navigate down the submenu with my mouse cursor. However, on some occasions, the submenu disappears ...

htmlcss

Leveraging Affix in Bootstrap version 2.3.2

Hey there, I'm currently working on building a sidebar similar to the one you can find here. The issue I'm facing is that my sidebar overlaps with the footer at the bottom of the page. What I need is for the sidebar to move up when the user scrol ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

What is the specified height for the AppBar and Toolbar components in Material-UI?

I'm trying to figure out the exact height being used in this scenario: <AppBar position="static"> <Toolbar> because I'll need that information for a calculation in another component. My current assumption is that it's 64px, b ...

cssmaterial-ui

What steps can I take to prevent a css-generated svg file from occupying more space than the original image? My wave appears to be 239px tall, while the svg file is a massive 1500px in height

I utilized an online tool to generate custom SVG CSS at this link: Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px ...

csssvg

The Wagtail/Django block is struggling to properly display content from a custom or nested StructBlock template

I have a block in the header of my base template that will apply "extra" CSS styles. These styles are dynamic and based on fields from a Wagtail CMS instance. In the base.html template, I define: <head> {% block extra_css %}{% endblock %} </he ...

pythoncssdjangotemplateswagtail

Having trouble with the alignment of the product grid on Woocommerce with the Wootique theme?

Hey there, I've been facing an issue with the woocommerce product display grid layout. The items keep getting misaligned, with one on a line and the others right next to each other. I attempted to fix it by adding some custom CSS code: .woocommerce ...

htmlcssajaxwordpresswoocommerce

Ways to modify the color of a selected dropdown in a navigation bar

Every time I click on the dropdown menu, it gets highlighted in blue. Is there a way to change this using Bootstrap or by adjusting my CSS? I've already attempted changing the color with this CSS element: .dropdown-item.active, .dropdown-item:active ...

htmlbootstrap-4navbar

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

javascripthtmlcsscss-transitions

Enhancing the styling of checkboxes using CSS and Javascript

My Javascript skills have been put to the test with a simple code snippet that customizes checkboxes by hiding them and using background images in CSS to display checks and unchecks. It's a neat trick, but I'm wondering if it's HTML/CSS comp ...

htmlcsscheckboxaccessibility

The carousel control in Bootstrap-material-design is working intermittently but encountering a zone-aware error

I manually downloaded Bootstrap v4.0.0-alpha6 and placed bootstrap.min.js into assets/js, along with tether.min.js and jquery.min.js. I also integrated Bootstrap-material-design. By the way, I am using @angular/cli 1.0.0-rc0. To implement a carousel in my ...

htmltwitter-bootstrapangularbootstrap-4

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Sideways scrolling carousel/slider

Currently, I am in the midst of a project page where my aim is to incorporate a horizontal scrolling project/image slider. Strangely enough, all my attempts thus far have failed to produce the desired outcome. This is the layout: the projects must transit ...

javascripthtmlcsstailwind-csshorizontal-scrolling

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

How can I adjust the size of an element without causing the other elements to move around on the

Currently, I am working on a live web page. You can view it at the following address: The issue I am facing is with the element just before the body's closing tag, the div "games_grid." When hovering over the game capsule image, it expands, causing t ...

htmlcss

Leverage jquery to adjust the height or width of an element depending on which dimension is larger

I'm a beginner in jquery and html and am currently developing a gallery webpage. The functionality involves setting the selected image as the page background and then scrolling vertically based on the mouse pointer's position. This works well for ...

jquerycssheightwidth

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

I'm currently working on a website for a company that requires users to complete all the information before proceeding. To achieve this, I created a form with the following code: <form action="Owners Infoback.php" onsubmit="return validateFo ...

javascripthtmlcss

Struggling to interact with a field within an HTML/CSS LESS document

I have encountered an issue with my website where I am unable to click on certain fields or buttons within the Login fieldset. Strangely, I can only interact with the fields and buttons located within the Register fieldset. The CSS for my website is writt ...

htmlcssless

Designing a spacious and visually appealing interface with the Material UI Grid system, while

I created a personalized library using Material UI. The JSX code I am using is displayed below; <MyLayout container spacing={2}> <MyLayout item xs={9}> <MyComp1 /> </MyLayout> <MyLayout ite ...

cssreactjsmaterial-ui

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

css

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting