Issues with the alignment of Bootstrap 4 columns

My Bootstrap 4 grid has a 9-unit column and a 3-unit column, but the 9-unit column is not occupying 3/4 of the page width as expected.

This is how the HTML code looks like:


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="services" class="container-fluid text-center">
  <div class="row text-center">
    <div class="col-sm-9 ">
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-off logo-small"></span>
          <h4>POWER</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        </div>
    <div class="col-sm-3 ">
      <img class="col-sm-3 features-image2" src="http://placehold.it/140x140">
    </div>
  </div>
</div>

The issue can be seen in this screenshot (the table should take up 9 columns or 3/4 of the screen width but it does not):

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

I am attempting to align both the table and the image vertically and horizontally within the col-3 column.

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

Multiple layout issues need to be addressed...

  • Utilize 3 col-sm-4 classes within the col-sm-9 to occupy one-third of the space
  • Avoid using the col-sm-12 class for the image
  • Implement flexbox and set a minimum height on the container for vertical centering
  • Consider changing col-sm-9 to col-sm-8 offset-sm-1 for horizontal centering (optional)

View the demo here: 

<div id="services" class="container-fluid text-center d-flex">
  <div class="row text-center w-100 align-items-center">
    <div class="col-sm-8 offset-sm-1">
      <div class="row">
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-off logo-small"></span>
          <h4>POWER</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-heart logo-small"></span>
          <h4>LOVE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-lock logo-small"></span>
          <h4>JOB DONE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
      <br><br>
      <div class="row">
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-leaf logo-small"></span>
          <h4>GREEN</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-certificate logo-small"></span>
          <h4>CERTIFIED</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-wrench logo-small"></span>
          <h4 style="color:#303030;">HARD WORK</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
    </div>
    <div class="col-sm-2 text-center">
        <img class="features-image2" src="//placehold.it/500x800">
    </div>
  </div>
</div>

Answer №2

Your implementation has a few issues that need to be addressed:

  • 1st: Why did you include those unnecessary
    tags?
  • 2nd: It might be better to set the image as a background image of the block rather than just placing it inside.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css';
.features-image2 {
  /*max-width: 140px;
  min-width: 140px;
  width: 140px;*/
}

.block-left{
  height: 500px;
  background: red;
}

.block-right{
  height: 500px;
  background: blue;
  background-image: url("https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxMzg3MDI5NV5BMl5BanBnXkFtZTcwOTAxODc0Ng@@._V1_UY317_CR31,0,214,317_AL_.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
<div id="services" class="container-fluid text-center">
  <div class="row text-center">
    <div class="col-sm-9 block-left">
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-off logo-small"></span>
          <h4>POWER</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-heart logo-small"></span>
          <h4>LOVE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-lock logo-small"></span>
          <h4>JOB DONE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
     
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-leaf logo-small"></span>
          <h4>GREEN</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-certificate logo-small"></span>
          <h4>CERTIFIED</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-wrench logo-small"></span>
          <h4 style="color:#303030;">HARD WORK</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3 block-right">
      
    </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

FancyBox: Struggling to adjust dimensions accurately

Currently using Fancybox 1.2.6 in conjunction with JQuery 1.2.6, Sample Code: <script type="text/javascript> $(document).ready(function() { $("a.iframe").fancybox({ 'width' : 300, 'hei ...

javascriptjquerycssfancybox

using response.redirect to navigate to a new page with a database value

<body> <%@page import="java.sql.*" %> <%@page import="javax.sql.*" %> <% String user=request.getParameter("username"); session.putValue("uname",user); String pass=request.getParameter("pass"); ...

htmljspservletsresponse.redirect

Creating a diagonal rectangle with a flat bottom: A step-by-step guide

Hey there, I've encountered a little issue. I managed to create a diagonal shape on my webpage similar to the one shown in this image: https://i.sstatic.net/tMgpd.png Now, what I'm aiming for is something like this: https://i.sstatic.net/xToz7.p ...

htmlcss

MultiArray authentication system

I am currently working on a multi-array login system, but I am facing an issue where only the first account is functioning properly. The other two accounts are displaying incorrect password or username errors. Account 1 corresponds to the name, Account 2 ...

phphtmllogin-script

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

javascriptjqueryhtmlcss

Is there a way to generate a query dynamically using the ID of an HTML element?

My current task involves working with a basic navigation bar in HTML code, like this: <div class="views"> <b>Views</b> <hr style="background-color:#f0efef;"> <table id="views_table ...

phphtmlajax

Mastering nesting list-groups in Bootstrap 5.1 - A comprehensive guide

I'm currently utilizing the Bootstrap 5.1 list group component to craft a multi-level list group. This is my approach: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9 ...

twitter-bootstrapbootstrap-5

Is there a way to verticially center text and images across columns using Bootstrap 5?

My text is not aligned properly due to excessive padding, causing it to shift to the top right. I attempted to use Bootstrap to adjust alignment and justification but am still struggling to identify the cause of this issue. Unfortunately, I cannot provide ...

htmlcssbootstrap-5

What is the solution for the issue of encountering an undefined key array email while attempting to log in through the form?

I encountered an issue while working on a login form that communicates with the database using PHP at the backend. Even though I have verified the correctness of my login credentials, I am facing an error related to undefined array keys 'email and pas ...

phphtmljquerymysqlforms

Issue with rendering images on Bootstrap-Vue card component

In the process of creating a static website with Vue.js, I am attempting to incorporate a basic Bootstrap card using Bootstrap-Vue. Unfortunately, I am facing an issue where the image does not display when utilizing the b-card component with the img attrib ...

htmltwitter-bootstrapvue.js

Ways to display the values of angular variables within ng-bind-html

Converting HTML content from a database saved as varchar to front end JavaScript code can be tricky. The content is stored in a variable called vm.htmlContent and must be displayed as HTML on a web page. To achieve this, the ng-bind-html angular directive ...

javascripthtmlangularjsng-bind-htmlng-bind

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI

import React from 'react'; import { makeStyles, Typography, Grid } from '@material-ui/core'; const styles = makeStyles((theme) => ({ root: {}, textStyle: { fontFamily: 'brandon-grotesque-black', tex ...

cssmaterial-uihovermaterial-designstyling

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

Leveraging the capabilities of the phonegap framework alongside node.js, javascript, html, mysql, and css

Could someone demonstrate how to utilize phonegap and node.js to interact with a mySQL database by pushing and pulling data from an HTML page or form? THANKS EDIT var connection = mysql.createConnection({ host : 'localhost', user : 'root& ...

htmlnode.jscordova

Hiding and displaying elements using jQuery for printed output

Is it possible to customize the show and hide properties of JQuery for different media types (e.g., screen and print)? For instance, I have two divs and a button that toggles between showing and hiding one div while displaying the other. However, when it ...

jquerycssshow-hide

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

javascriptjqueryhtml

Is this code in line with commonly accepted norms and standards in Javascript and HTML?

Check out this Javascript Quiz script I created: /* Jane Doe. 2022. */ var Questions = [ { Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 }, { Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: ...

javascripthtmlprotocols

Expanding SVG Button Overlay in ChakraUI

I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...

cssreactjssvgscalechakra-ui

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

HTML/CSS Pricing structure

As a designer, I am attempting to craft a pricing table with a unique pricing arrangement. Despite my efforts with HTML and CSS, I am struggling to position the "12x" below the "R$" and have both appear next to the price of "219." Here is the pricing layo ...

htmlcssbootstrap-5