Tips for aligning 'textarea' and 'a' (button) tags in a single row

<div class="row">
   <a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row">
   <textarea name="textareaAxs" ></textarea>
   <a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
enter image description here

Answer №1

.row2 {
  display: flex;
  align-items: center;
}
<div class="row">
   <a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row2">
   <textarea name="textareaAxs" ></textarea>
   <a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>

Answer №2

Check out this DOCUMENTATION

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

<div class="container">
  <div class="row">
    <div class="col">
      <a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
     </div>
  </div>
  <div class="row">
      <div class="col">
        <div class="input-group">
          <textarea class="form-control" name="textareaAxs" ></textarea>
          <div class="input-group-append">
            <a class="input-group-button btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
        </div>
      </div>
    </div>
  </div>
</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

Assist with JavaScript Programming

Can someone assist me in creating functionality for the "Show Picture" button to toggle the visibility of the picture when clicked? I've been trying to achieve this using an If/Else statement for a school project but have been struggling with it. Any ...

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

Utilizing Bootstrap grid system to create varied column widths for content alignment

Looking to create a page with multiple entries that include text descriptions and associated icons of varying sizes, aligned neatly. (For simplicity, using letters "i" and "w" as placeholders for icons.) For wider screens, the setup should feature a grid ...

When utilizing ThreeJS video texture, it is necessary to ensure that CORS headers are included, regardless of whether the <video> tag typically requires it or

I am facing an issue with my localhost web server where a remote video from Firestore Storage is being played on a page using a <video> tag. The video plays correctly on the web page. However, I am now trying to use the same video as a texture in a T ...

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

Tips for refreshing only a portion of a webpage using JavaScript/jQuery

I have two distinct navigational sections on my website. The left column has its own navigation menu, while the right column (main content area) contains a separate set of links: My goal is to click on a link in the left-hand sidebar (such as "Resume", "E ...

Htaccess rules not translating directory-style URLs into query-style URLs

I am currently working on a basic htaccess file to convert directory-style URLs to query-style. For example: a. /public_html/main/folder1/folder2 ... etc b. /public_html/main.php?1=folder1&1=folder2 Despite my efforts with various regex and rewrite r ...

CSS border alignment techniques

I am attempting to achieve the effect of having an orange border on top of a blue border, with only the orange border moving. I have noticed this design feature on various websites but have been unable to replicate it without removing the padding of the pa ...

Update Personal Information with PHP and MySQL

i have two files named edit.php and update.php. The content of edit.php is as follows: <?php session_start(); $_SESSION['id'] = '9'; $id = $_SESSION["id"]; $username = $_POST["username"]; $fname = $_POST["fname"]; $password = $_POST ...

I am in the process of troubleshooting why the header does not redirect correctly when clicked

As I work on developing a user authentication script for my database, I encounter an issue when trying to match the information in my MySQL database upon clicking a button. For some reason, nothing seems to happen regardless of whether the login informatio ...

What is the best way to incorporate a unique box shadow onto my svg image?

While I've seen a similar question here: How to add box-shadow to a svg path circle shape, I am struggling to grasp how the transition from box shadow characteristics to SVG drop shadow characteristics was achieved. (Especially given that SVG Drop sha ...

"Ensuring a fixed table header (thead) with Bootstrap styling in AngularJS: A step-by-step guide

I'm struggling to make the header of my AngularJS webpage sticky using Bootstrap Styling. Despite trying multiple solutions, none seem to work correctly. Does anyone have a simple approach to fix this issue? Additionally, when I attempt to make the he ...

Creating a method to emphasize specific words within a sentence using a custom list of terms

Looking for a way to highlight specific words in a sentence using TypeScript? We've got you covered! For example: sentence : "song nam person" words : ["song", "nam", "p"] We can achieve this by creating a custom pipe in typescript: song name p ...

Webpack fails to handle CSS background images

I'm having trouble with my Webpack configuration as it's not processing CSS images set in the background property: background: url('./hero.jpg') no-repeat right; This is resulting in an error message that reads: ERROR in ./src/app/comp ...

Obtaining the Date Value from an HTML5 Input Field with the type="date"

In this interface, users have the option to select a starting date (fromdate) and an ending date (todate) from the form below: <html> <form name="frmSearch" method="post" action="searchdate2.php"> <label> From date </label> ...

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

Materialize CSS dropdown select arrow out of position

Here is a snapshot of the Materialize CSS, which can be viewed at: However, I am encountering an issue where the dropdown arrow appears below the list instead of on the side. I am currently using Django 3. How can I resolve this? https://i.sstatic.net/d ...

Image set as the background on a website

I recently started working with Groovy and Grails, designing my own personal website. I'm looking to set an image (located in the asset folder) as the background for my index.gsp page. How can I achieve this? ...

Choosing premier class and modifying characteristics

Looking for a solution to hide a div without modifying the HTML code directly? By using JQuery, you can manipulate the appearance of elements on a page. While it's possible to select the first instance of a class and retrieve its value, adding an attr ...