class=btn btn-danger align-horizontal

I need help aligning my 3 buttons horizontally side by side. The current setup doesn't look good to me.

class= btn btn-danger

Can someone guide me on how to write the CSS for this?

This is my code:

<div class="row">
        <div class="col-sm-4">
            <h3>Desktop & laptop repairs</h3>
            <p>We can replace all types of hardware, the most common repairs include</p>
            <a href="#" class="btn btn-danger">READ MORE</a>
        </div>
        <div class="col-sm-4">
            <h3>Virus removal</h3>
            <p>If your computer is infected with a virus, we can help clean up your system. We can also assist in securing your system against future virus attacks.</p>
            <a href="#" class="btn btn-danger">READ MORE</a>
        </div>
        <div class="col-sm-4">
            <h3>Data recovery</h3>
            <p>If your hard drive is faulty, we can replace it quickly and affordably. In most cases, we can recover your data. If Windows crashes, we can also save your data.</p>
            <a href="#" class="btn btn-danger">READ MORE</a>
        </div>
    </div>
</div>

css

Answer №1

There are two choices available.

You can either set a fixed height for the h3 and p elements using CSS (adjust the numbers accordingly).

.col-sm-4 p {
    height: 200px;
}
.col-sm-4 h3 {
    height: 50px;
}

OR Move the buttons into a new row.

<div class="row">
        <div class="col-sm-4">
            <h3>Desktop & laptop repairs</h3>
            <p>We specialize in replacing all types of hardware, with common repairs including...</p> 
        </div>
        <div class="col-sm-4">
            <h3>Virus removal</h3>
            <p>If your computer is infected with viruses, we can help clean up your system. We can also provide security measures to protect against future attacks.</p>
        </div>
        <div class="col-sm-4">
            <h3>Data recovery</h3>
            <p>In case of a defective hard drive, we offer affordable and quick replacement services. We can typically recover lost data or salvage data if Windows crashes.</p>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-sm-4">
            <a href="#" class="btn btn-danger">LEARN MORE</a>
        </div>
        <div class="col-sm-4">
            <a href="#" class="btn btn-danger">LEARN MORE</a>
        </div>
        <div class="col-sm-4">
            <a href="#" class="btn btn-danger">LEARN MORE</a>
        </div>
    </div>
</div>

Edit: Including code snippet

Answer №2

After some thought, I've realized that my previous approach may not be the most efficient way to handle this situation. If I were to reuse that class in the future, I might need to add an additional class to the parent element and adjust it accordingly, as you suggested. I just need to work out the details - being a novice, these concepts are still new to me.

Despite these challenges, I believe I'm making progress.

Check out my latest PC service website!

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

What is the best way to remove the background from a button that uses -moz

After adding the select component to my page, I noticed a problem with the select button in Firefox. In Chrome, the arrow down button looks normal, like this, but in Firefox it appears differently, as shown in this image. How can I remove the background ...

htmlcssfirefox

Two divs with floated attributes and equal heights

My unique HTML is below: <div class="container"> <div class="box"> <div class="float"> <img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' /> </div> ...

htmlcss

Make sure to always display the browser scrollbar in order to avoid any sudden page

Question: How can I ensure the scrollbar is always visible in a browser using JavaScript? I've noticed that some of my web pages have a scrollbar while others do not, causing the page to jump when navigating between them. Is there a way to make t ...

htmlcssbrowserscrollbar

Issue with JQuery: Logo only becomes visible after scrolling

Recently, I added a jQuery script to modify the header as we scroll on our website. Everything is functioning smoothly except for one issue - the large logo on the left side doesn't appear when visitors first land on the page; it only shows up after t ...

jqueryhtmlcssheaderscroll

I.E Compatibility Problem with Button CSS Styling

I've created a button with some styling that looks great on Firefox and Chrome, but unfortunately doesn't work quite right on Internet Explorer (all versions). Check out the JsFiddle DEMO : http://jsfiddle.net/Mhded/1/ Below is the code I' ...

htmlcssinternet-explorer

How to Modify Button Backgrounds in Angular 8 after Click Events?

Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML. My Objective: I aim to modify the background-color of a button when it is clicked. The previously clicked button should revert to its origin ...

htmlcssbuttonangular8background-color

Injecting information into an input field using the :before pseudo-class in CSS when focus

In order to have a static part "+91" displayed in an input field upon focus, I have successfully replaced the placeholder during onFocus and onBlur events. However, I am unable to add a listener to read content from :before. <div class="goal-mobile"> ...

javascripthtmlcssvue.js

place a div beneath a different element

Is there a way to position a div below another element without impacting the layout of the rest of the content? <div style="margin:50px"> <div style="margin:20px; padding:10px; width:100px"> This is a small <span id="test" sty ...

htmlcss

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

cssresponsive-designmedia-queries

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Whenever I attempt to apply float left or display inline, it causes issues. The form currently has a max-width of 1000px. I was hoping that the first and last names would automatically align side by side if there is enough space. Perhaps setting a min-widt ...

htmlcssinlinedisplay

Create a darker background for white text using CSS

Looking to showcase multiple images within cards with text overlay. These images are user-uploaded and can vary in color, so the white text must be solid without any transparency issues like in the sample fiddle provided. Check out this example fiddle - h ...

htmlcss

Arranging Checkboxes Vertically in HTML Without Using Inline Styling

My checkboxes are currently displayed in a column format, but I would like them to be in a single row. To better illustrate the issue, here is a photo: https://i.sstatic.net/PxRzB.jpg I am seeking assistance on how to align the checkboxes horizontally in ...

htmlcssalignmentrow

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

css

Rearrange DIV elements by clicking a button that redirects you to a different webpage

Consider a scenario with two distinct pages: website.com/page1 website.com/page2 Page 1 contains multiple buttons, each leading to Page 2. On Page 2, there are various content sections (divs). Is there a straightforward meth ...

javascriptjqueryhtmlcss

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

htmlcsssvgcss-animations

Safari: Contenteditable div text without spaces fails to wrap around an image when focused

In a hypothetical dialog layout, there is a div on the left side and an image on the right side. Both the div and the image start at the same vertical point. However, the text in the div is longer than the image. The desired layout is for the text to be di ...

htmlcsscontenteditable

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

htmlcssbootstrap-4

Generate a dynamic animation by combining two images using jQuery

My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code. This is the code I am using: $(document).ready(function() { $(".animar").click(function() { $("#img4" ...

javascriptjquerycsshtmlcss-animations

Creating a menu that is even more optimized for mobile devices

I recently came across a mobile menu style that I really like: https://www.w3schools.com/html/default.asp What I appreciate about this style is that even on smaller screens, it still displays some main navigation items. This allows for popular links to be ...

htmlcssreactjsnext.js

What is the best way to show inline icons within menu items?

Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...

javascriptcssreactjsmaterial-ui