Bootstrap's landing page problem

I am currently working on creating a landing page using bootstrap and have encountered an issue with the text alignment in my section containing icons and tags. In order to make the text appear clean and concise, I want the text to be displayed in either one or two lines.

Here is the code for the section:

 <section id="process" class="process">
            <div class="container-fluid container-fluid-max">
                <div class="row text-center py-5 ">
                  <div class="col-12 pb-4">
                    <h2 class="text-red">Lorem, ipsum dolor.</h2>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                    <div class="col-12 col-sm-6 col-lg-3 pl-12 pr-12 ml-13 mr-13">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-book"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-school"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                       <div class="col-12 col-sm-6 col-lg-3">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-school"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-school"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                </div>
              </div>
        </section>
htmlcsstwitter-bootstrapweb-frontend

Answer №1

Make sure to correct your code by ensuring there are no duplicate blocks with the width 

class="col-12 col-sm-6 col-lg-3"
. Follow this structure:

<section id="process" class="process">
           <div class="container-fluid container-fluid-max">
               <div class="row text-center py-5 ">
                 <div class="col-12 pb-4">
                   <h2 class="text-red">Lorem, ipsum dolor.</h2>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-book"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-school"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-school"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-school"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                </div>
              </div>
            </div>
        </section>

Answer №2

The reason for this issue is due to nesting columns within columns.

<div class="col-12 col-sm-6 col-lg-3">
    <div class="col-12 col-sm-6 col-lg-3">
      ----                     
    </div>
 </div>

In the provided code snippet, the second div will occupy 3 columns in large screens (col-lg-3) and 6 columns in small screens (col-sm-6) of the first div. It will not fill the entire width specified by the first div.

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

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

Implementing a Custom CSS Theme in JavaFX

Hey everyone, I stumbled upon this amazing JavaFX theme called Flatter on . I've been attempting to implement it for a couple of hours now, but I'm struggling with the process. Can someone provide me with a detailed guide on how to activate thi ...

cssnetbeansjavafx

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

jqueryhtmlcss

Getting the value of an HTML tag returned from an Ajax request

After making an AJAX call in VBScript, I am receiving the following HTML: <html> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="100%" ...

javascriptjqueryhtmlajax

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

htmlcssbootstrap-5bootstrap5-modal

Partial functionality achieved by integrating Bootstrap for a modal form in Rails

Having an issue with a form in a partial view on Rails 3.2.3 utilizing the bootstrap 2.0.2 modals #myModal.modal .modal-header .close{"data-dismiss" => "modal"}= link_to "x", root_path %h3 Add Tags .modal-body = form_tag '/tagging& ...

javascriptruby-on-railsajaxformstwitter-bootstrap

Generate an HTML table and import it into Excel while retaining its styling

Has anyone successfully exported tables from an HTML document to Excel while preserving all CSS styles? My application can generate HTML code for a table, but I need to export the exact same table to Excel. I am using OpenXML. Could it be necessary to uti ...

htmlexcelopenxml

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

javascriptphpjqueryhtmlcss

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked. HTML: <div id="1" class="divs" onclick="hide()"></div> <div id="2" class="divs" onclick="hide()"></div> <div id="3" cla ...

javascripthtmlcss

Rows Within Rows That Outsize Their Parent

I am having trouble with the Bootstrap 4 grid layout while working on Vertical forms. My goal is to place a col-lg-9(child) inside a col-lg-6(parent). For instance: <div class="form"> <div class="row"> <div class="col-lg-6"> ...

htmlbootstrap-4

What could be causing the modal to not appear when clicking on this div?

$(function() { $("#pagination a").trigger('click'); // When the page loads, trigger a click event $('body').on('click','div.well well-sm',function(){ var list = $(this); $('#myModal .modal-title').h ...

jqueryhtmlcssajax

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor

Is there a potential issue with descender tags causing the malfunction of HTML and CSS tags?

Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...

htmlcsstags

Executing a function in Angular 2 depending on the class assigned to a <div>

In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...

javascriptcssangularng-class

The navigation bar appears to have a different width on mobile view specifically on one page

I created a mobile view navigation that appears correctly on two out of three pages. It spans the full 100% width as intended, but on one page it extends beyond that and causes the layout to look distorted due to the larger navigation bar. I'm not sur ...

htmlcss

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

Using single quotation marks in Javascript

When the variable basis contains a single quotation mark, such as in "Father's Day", I encounter an issue where the tag is prematurely closed upon encountering the single quotation mark. 'success' : function(data) { div.innerHTML = &apo ...

javascripthtmltags

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

I am currently working with a set of 3 files. index.html: ... <a href="#" onclick="fetch(function(data) {console.log(data); subWindow(data)})">subWindow</a> ... The fetch() function retrieves a callback in JSON format. subWindows.js: let m ...

javascripthtmlnode.jsjsonelectron

What is the best way to display a collection of square Views in a FlatList in a react native application?

How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes? Which CSS properties in react-native are necessary to achieve square shapes for each <Item/& ...

cssreact-native

Select the five previous siblings in reverse order using jQuery's slice method

I have a unique approach to displaying a series of divs where only 5 are shown at a time using the slice() method. To navigate through the items, I include an ellipsis (...) link after every 4th item, which allows users to easily move on to the next set of ...

javascriptjqueryhtmlcssangularjs

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

I've implemented a feature that resizes the font size within a text area based on the selected font size. It was functioning flawlessly... until I decided to place the font size selection in a drop-down menu, which caused the feature to stop working. ...

javascripthtmlcss