Aligning figures using the col-sm-4 command in Bootstrap styling

I am struggling to horizontally align three elements using the col-sm-4 function, but unfortunately, it's not working as expected. No matter what I try, the items remain aligned to the left and stacked vertically. The images are all of equal size.

Below is the code snippet:

<section class="container">
      <div class="row">
        <figure class="col-sm-4">
          <p style="text-align: center">PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-sm-4">
          <p style="text-align: center">LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-sm-4">
          <p style="text-align: center">HELP</p>
          <img src="img/m3jpg"/>
        </figure>
      </div>
    </section>

And here is the CSS:

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;
  }

The inability to get this alignment right has been puzzling me as I've reviewed other websites that employ a similar technique without any issues. Any guidance would be greatly appreciated. Thank you.

htmlcsstwitter-bootstrap

Answer №1

Do you want it to look like this?

.row img {
  border: 4px dashed #000;
  clear: both;
  display:inline-block;
}
.col-sm-4 {
  display: inline-block;
}

SEE THE DEMO HERE

Answer №2

By making a few tweaks, I successfully got your code to work as intended (refer to comments in the snippet for specifics).

/* Adjusted the layout of the boxes using flexible boxes to arrange them in a row */

.flexgrid {
  display: flex;
  flex-direction: row;
  align-items: center;
 
}
/* Rectified CSS due to absence of 'row' elements */

/* Introduced the > operand */

section > .col > img {
  margin: 30px 0 30px;
  width: 50%;
  border: 4px dotted #000;
  clear: none;
  align: center;
}
.col > div, .col > img {
  content-align: center
}
<section class="container">
  <div class="flexgrid">
    <figure class="col">

      <!-- Replaced <p> with <div> to prevent line break -->
      <div>PLAY</div>
		  <center>
		    <img src="img/m1.jpg" />
      	</center>
    </figure>
		
    <figure class="col">
      <div>LEARN</div>
		  <center>
		    <img src="img/m2.jpg" />
      </center>
    </figure>
		
    <figure class="col">
      <div>HELP</div>
		  <center>
		    <img src="img/m3.jpg" />
        </center>
    </figure>
  </div>
</section>

Answer №3

It appears that the issue was related to the screen size not being specified in the col- format. By adding the classes col-lg-4, col-md-4, col-sm-4, and col-xs-4, the layout now supports all screen sizes and is functioning properly.

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section class="container">
      <div class="row">
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </div>
</section>

Answer №4

To center the content inside a row using Bootstrap, simply add the predefined class text-center to the <div class=row...:

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
      <div class="row text-center">
        <figure class="col-xs-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-xs-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-xs-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </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

Issues with Button Clicking in Selenium Web Driver Java

Here is the HTML code below: <td class=" center-align" style="padding:10px 0 0 0;" colspan="3"> <span data-bind="visible: !editing()" style="display: none;"></span> <input id="btnSaveUserProfile" class="orange-but" type="button" data- ...

javahtmlseleniumselenium-webdriver

Is there a way to utilize selenium to locate elements within nested frames?

While assisting another user with a Selenium/selector issue, I stumbled upon a larger problem that has me seeking a solution. It seems like I have entered (i)frame hell. Unfortunately, I couldn't figure out how to copy the dev console screenshot, so ...

htmlcssseleniumselenium-webdriver

adjusting array based on screen size fluctuations

Imagine having two arrays of images named landscape_images[] and portrait_images[]. One is for the landscape view and the other for the portrait view. When the screen width is in landscape mode, the wide resolution images will be displayed on the body. C ...

javascripthtmlcssreactjs

The location layer on my Google Maps is not appearing

For a school project, I am working on developing a mobile-first website prototype that includes Google Maps integration. I have successfully added a ground overlay using this image, but I am facing issues with enabling the "my location layer". When I tried ...

javascripthtmlgoogle-mapslocationmaps

What is the best method for sending data from an HTML page to a Django view in order to utilize it

I'm encountering an issue with Django urls. I need to pass the value entered in the Name input field after clicking the submit button. Let's assume I have the following HTML form- <form method='POST' action="{% url 'submittedf ...

htmldjangoview

Adjusting the alignment of text using the "=" symbol

Can you help me align text with the "=" sign, just like in the image below? https://i.sstatic.net/L53k2.png I know I can achieve this using mathjax, but I'd prefer to do it with CSS. However, my current method isn't producing aligned equal sign ...

htmlcssalignmenttext-alignment

The component is converting a controlled text input to become uncontrolled

There's an error warning popping up, saying "A component is changing a controlled input of type text to be uncontrolled." I'm more used to class components, so functional components are new to me. All I did was: First, I set an initial state for ...

javascripthtmlreactjs

Transforming a string into an onclick event handler using JavaScript

Looking for assistance with assigning the literal content of the variable ElementAction to an onclick handler of a different HTML element. Despite attempting HTMLElement.onclick = ElementAction, it doesn't seem to be working as expected. Any guidance ...

javascripthtml

What is the correct way to utilize Bootstrap grid offsets?

Recently, I have been working on a webpage that features a unique layout using Bootstrap grid rows. Each row consists of a paragraph of text and an image. The layout is designed to have the text occupy specific columns on large screens, with the image shif ...

htmlcssbootstrap-5

Rearranging Information for Optimal Mobile Viewing

I am in the process of designing an HTML email template, and I am working on ensuring its compatibility with mobile devices. Currently, I have arranged an image, followed by text and a button, but my goal is to switch the order for mobile displays so that ...

htmlcssemailhtml-email

Concentrate on a specific component within an overlay using jQuery

How can I focus on a specific area within an overlay when adding an item to the cart? I want to make the rest of the overlay darker and the targeted area more visible. See a quick mockup here: https://i.sstatic.net/UpJuc.png Here's the HTML code: & ...

javascriptjqueryhtmlcss

Shifting Objects within Bootstrap 5 Navigation Menu

Hey there! I'm having some trouble aligning the items in a Bootstrap 5 navigation bar to the side, just like in this screenshot: https://i.sstatic.net/nxh80.png I tried adjusting the alignment but nothing changed on the site (I was using Live Server ...

javascripthtmlcsstwitter-bootstrap

Steps for eliminating redundant lines in a CSS drop-down navigation bar

When looking at the following CSS code, I noticed that the bottom and top borders seem to overlap, creating a thick line. I'm having trouble figuring out how to remove it. Any suggestions or advice would be greatly appreciated. Thank you! HTML Code: ...

cssmenuborder

Struggling with implementing click events on Ionic-Calendar 2?

Attempting to implement a (click) event for ionic-calendar 2 where it deactivates a button if the user clicks on a date that has already passed. The issue I am facing is that when I initially click on a past date, the button remains enabled. However, upon ...

htmltypescriptionic3

Web page experiencing "increased magnification during loading"

I've been experiencing an issue with my mobile site where the page loads as if it's zoomed in every time. I can easily scale it on a touch phone to make it look right, but I'm looking for ideas on how to prevent this from happening altogethe ...

javascriptandroidhtmlmobile

CSS - Issue with a blurred div nested inside another blurred div

I'm facing an issue where I can't have a blurred element inside another blurred element. Currently, I have a header with backdrop-filter: blur(3px); and a div within it with a more intense background blur of backdrop-filter: blur(50px);. However, ...

javascripthtmlcss

What is the best way to integrate React-bootstrap with Typescript?

Currently, I have incorporated Typescript into my project alongside React-Bootstrap. However, I encountered a Lint error with the following code snippet: const renderSearchAddressButton = (): JSX.Element => { return ( <div className="sear ...

reactjstypescripttwitter-bootstrapbootstrap-4react-bootstrap

Steps for binding the chosen item in Syncfusion SfListView

I've encountered an issue with my razor file: @using Syncfusion.Blazor.Lists; @inject NavigationManager NavigationManager @page "/main_list" <h1>Select the items</h1> <SfListView DataSource="@ShopItems01.ToList()" ...

htmlblazorsyncfusionblazor-webassemblysyncfusion-blazor

displaying dropdown menu from bootstrap 4 on top of a div located below

Struggling to make the bootstrap 4 responsive top nav appear over my container div, but can't find a solution. This is how the Top nav should function: W3Schools editor Here is my code on jsfiddle: jsfiddle function myFunction() { var x = ...

htmlcssbootstrap-4dropdown

how to change class on vue function result

I need a way to display the content stored in requestData as li elements. Each list item should have an onclick function that, when clicked (selected), adds a specific value from a reference to an array. If clicked again (unselected), it should remove the ...

javascripthtmlvue.jsvue-component