What is the best way to align content within a div to match the alignment of content outside of it using bootstrap?

I have a section that stretches across the width of the screen, but the text inside is contained within a container and aligns correctly.

Below that section is a two-column layout, and I'm trying to align the text in the left column with the text above it, but I haven't been successful so far.

Here is the current output:

https://i.sstatic.net/XZ8i6.png

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

<section id="">
  <div class="d-flex align-items-center bg-primary" style="min-height: 450px">
    <div class="container">
      <h1 class="">TITLE TEXT</h1>
    </div>
  </div>
</section>

<section id="">
  <div class="subhead bg-primary">
    <div class="row">
      <div class="col-sm bg-secondary" style="min-height: 400px">
        <div class="container">
          <h3>TITLE</h3>
        </div>
      </div>
      <div class="col-sm bg-warning" style="min-height: 400px"></div>
    </div>
  </div>
</section>

The HTML code I'm currently struggling with (the CSS was added within the HTML for testing purposes)

Thank you for any assistance provided, and please let me know if you need any additional information.

htmltwitter-bootstrapcssbootstrap-4

Answer №1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
  <div class="row bg-primary" style="min-height: 450px">
    <div class="col-6 d-flex align-items-center">
      <div class="container">
        <h1 class="text-center">UNIQUE TITLE TEXT</h1>
      </div>
    </div>
  </div>
</section>
<section id="">
  <div class="subhead bg-primary">
    <div class="row" style="min-height: 400px">
      <div class="col-6 d-flex align-items-center bg-secondary">
        <div class="container">
        <h3 class="text-center">UNIQUE TITLE</h3>
      </div>
    </div>
    <div class="col-6 bg-warning"></div>
    </div>
  </div>
</section>

Answer №2

.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
  <div class="row bg-primary" style="min-height: 450px">
    <div class="col-12 d-flex align-items-center">
      <div class="container text-to-center">
      
        <h1 class="text-center">Main Heading</h1>
      </div>
    </div>
  </div>
</section>
<section id="">
  <div class="subhead bg-primary">
    <div class="row" style="min-height: 400px">
      <div class="col-6 d-flex align-items-center bg-secondary">
        <div class="container text-to-center">
        <h3 class="text-center">Subheading</h3>
      </div>
    </div>
    <div class="col-6 bg-warning"></div>
    </div>
  </div>
</section>

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

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

javascripthtmldomecmascript-6html-table

Exploring the process of web scraping from dynamic websites using C#

I am attempting to extract data from using HtmlAgilityPack. The website is dynamic in nature, displaying content after the page has fully loaded. Currently, my code retrieves the HTML of the loading bar using this method, but encounters a TargetInvocation ...

javascriptc#html

Unable to create adjacent buttons using display:inline-block

I'm using Angular to dynamically create buttons, but they are stacking vertically instead of appearing side by side <div *ngIf="response"> <div *ngFor="let hit of response.hits.hits"> <button class="btn btn-primary" role="butt ...

htmlcssangularstylesngfor

The dropdown menu fails to function when placed within a div or generated dynamically

When I try to utilize the "dropdown-menu" outside of a div, it works correctly. However, when it is placed inside a div or added dynamically, it does not work as intended. Here is an example on jsfiddle The code snippet is as follows: <link rel="s ...

javascripthtmljquerydrop-down-menubootstrap-5

Confirming user credentials for every page

I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...

phpjavascripthtml

Ensuring the next tab is not accessible until all fields in the current tab are filled

I am working on a form with a series of questions displayed one at a time, like a slide show. I need help with preventing the user from moving to the next set of questions if there is an empty field in the current set. Below is the script I am using to nav ...

javascriptjqueryhtml

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...

phphtmlcsslaravelvue.js

Press on a rectangle inside an HTML5 SVG program

I'm currently developing a web application that utilizes the svg and Raphael library: workflowEditor.show(); var myList = document.getElementsByTagName("rect"); for (var a = 0; a < myList.length; a++) { myList[a].addEventListener("OnClick", f ...

javascriptjqueryhtmlsvghtml5-canvas

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...

javascriptcssnode.jssvgless

Click the closest checkbox when the value equals the Jquery datatable

I am facing an issue where I need to add a class and click on a specific element in each row of my jQuery datatable if a certain value is equal. However, I am unable to successfully add the class to that element and trigger a click event. <table id="us ...

javascriptjqueryhtmlcss

Switch Image on Hover in Panel Group

After delving into Bootstrap, I encountered an issue. I have a Panel-Group with an image and some text. The challenge is switching the image on hover, but it should change when hovering over the panel, not just the image itself. I've found solutio ...

jqueryhtmlcssimagebootstrap-4

Navigation website with a twist

My design features a main navigation that is rotated 90 degrees, while the sub-menu remains horizontally aligned. <div id="nav"> <ul> <li><a href="#">Woonaccessoires</a></li> ...

htmlcss

Struggling to locate the element using xpath on a JavaScript enabled website in Selenium with Chrome

I have been attempting to extract data from a website that utilizes Javascript. Despite researching similar inquiries on xpath in Selenium, I have not found a solution. I initially tried using requests, but as the JavaScript doesn't load completely, I ...

javascripthtmlpython-3.xseleniumxpath

Tips for dynamically adding and removing keys from a JSON object

I am working on a code for a car rental website using jQuery mobile. I need to dynamically add and remove keys from a JSON object with true or false values. The goal is to make a selected car unavailable by changing the "available" key to either true or ...

javascriptjqueryjsonhtmljsonp

Prevent Symfony2 Twig from rendering HTML content

Is there a way to disable the rendering of HTML responses in Twig? I am currently working on a RESTful API and my goal is to completely prevent HTML rendering. For instance, if I access /foo/bar without an oAuth Access Token, Symfony2 should reply with a ...

htmljsonrestsymfonytwig

Is extracting the primary image from a WordPress post using raw post data the ideal solution?

I am currently working on a website that needs to showcase the first image from each post in a specific category. Despite having a functioning solution in place, I can't help but feel like there might be a more efficient way to achieve this. Is there ...

phphtmlwordpress

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui

Troubles with modal functionality in Ionic application involving ion-slide-box

Utilizing ion-slider to display images has been a seamless experience, except for one hiccup. If I navigate directly from the first full image back to the home screen, the slider ceases to function properly. To address this challenge, I have employed spec ...

htmlangularjscordovaionic-framework

Designing custom gridviews using CSS in an ASP.NET application with Bootstrap

Hey there, I'm currently working on a post system using GRIDVIEW in ASP.NET/BOOTSTRAP. Since GRIDVIEW is basically a table, I am using templatefild and itemtemplate with table td and tr to make it resemble a BLOG! Everything is going well so far, I ha ...

c#cssasp.nettwitter-bootstrapgridview

Retrieving specific data from an SQL database using PHP

My goal is to create a select form with fields populated from an SQL database containing a table of stores. I used a method to retrieve distinct store names and populate the select tool with them. echo '<select name="StoreName" />'."\ ...

phphtmlmysqlsqlinnodb