How to position a textarea alongside a checkbox using CSS with Bootstrap

I'm having an issue aligning a text area next to a checkbox in my Bootstrap HTML. Here's the code snippet:

<div class="form-group row">
    <div class="col-12 form-check">
        <label class="col-3 col-form-label" for="check15">Filter "na" results</label>
        <input id="check15" class="box15" type="checkbox">
        <textarea class="col-3 form-control form-control-sm" rows="5" id="filter_na_results"></textarea>
    </div>
</div>

Despite the code, the textarea is appearing beneath the row with the label and checkbox. How can I adjust this layout so that the textarea appears to the right of the checkbox on the same line?

You can also view the issue on JSFiddle.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Make sure to eliminate the form-control class and delete the flex div, replacing it with a row div. Also, include align-items-start on the row div to ensure alignment to the top of the textarea.

Remember to apply the p-0 class on the label.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="form-group row">
  <div class="col-12 form-check">
    <div class="row align-items-start">
      <label class="col-3 col-form-label p-0" for="check15">Filter "na" results</label>
      <input id="check15" class="box15" type="checkbox">
      <textarea class="col-3 form-control-sm offset-3" rows="5" id="filter_na_results"></textarea>
    </div>
  </div>
</div>
</div>

Answer №2

.flex {
  display: flex;
  align-items: center;
}

textarea {
  height: 50px;
  width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group row">
  <div class="col-12 form-check">
    <div class="flex">
      <label class="col-3 col-form-label" for="check15">Filter "na" results</label>
      <input id="check15" class="box15" type="checkbox">
      <textarea class="col-3 form-control form-control-sm offset-3" rows="5" id="filter_na_results"></textarea>
    </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

Steps for creating a herringbone design on an HTML canvas

Seeking Help to Create Herringbone Pattern Filled with Images on Canvas I am a beginner in canvas 2d drawing and need assistance with drawing mixed tiles in a cross pattern (Herringbone). var canvas = this.__canvas = new fabric.Canvas('canvas' ...

javascripthtmlcanvasdesign-patternsfabricjs

Modern design featuring soft borders that blend into the background

I am in the process of bringing a unique webpage layout to life. The design is a bit unconventional, and I'm not sure if it's feasible. Essentially, I plan to have a fixed-width content box of 900px positioned in the center of the page body. I ai ...

htmlcsslayoutfluid

Non-responsive behavior triggered by a button click event (JavaScript)

Help needed with displaying results on the same page for an online calculator I'm creating. Why are the results not showing up as expected? I want users to input 4 pieces of information, have the logic executed, and then display the answers below th ...

javascripthtmlcss

Using a variable to store the value of the id attribute in HTML code

How can I dynamically add an ID attribute to an HTML element using a variable declared in JavaScript? Using jQuery var table_row = $('table').find('tr#' + pid); var name = table_row.find('td:nth-child(1)').html(); table_ ...

javascripthtml

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

javascriptjqueryhtmlcssjqgrid

Showcasing tooltip when hovering over Font Awesome icon

My datatables grid includes some font awesome icons to represent actions like edit, delete, etc. Here's a visual representation of how they appear: https://i.sstatic.net/W0VQi.png Take a look at the accompanying HTML code: <td> <a a ...

htmlcssasp.net-core-2.0

Looking for a way to add a permanent footer to the bottom of your webpage without affecting the tab order for accessibility?

I have a paginated form with a fixed navigation footer at the bottom that needs to stay in place even when scrolling. This footer should also be at the bottom of the page for mobile devices and tablets. To achieve this, I used position: fixed on the foote ...

javascriptcssreactjs

Is it possible to change %20 in a URL to a hyphen?

Is there a way for my search form to display %20 in the URL when I fill the input field with spaces? For example: Basketball coach Current output: basketball%20coach Desired output: basketball-coach <form action="/tag/" id="form-hockey_v1" name=" ...

javascripthtmlurl

Modify the MUI Select icon background color on hover

I have been working on customizing the MUI Select method, and I've encountered difficulty when trying to hover over the "NarrowDownIcon": https://i.sstatic.net/VEZFP.png My goal is to change the hover behavior of this icon by setting its backgroundC ...

javascriptcssreactjsmaterial-ui

Tips for concealing the top button on a mat calendar

I have a calendar for a month and year, but when I click on the top button it also displays the day. How can I hide that button or instruct the calendar not to show the days? Check out this image I was thinking of using a CSS class to hide that element. ...

cssangularangular-material

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

javascripthtmlcsstypescriptquasar-framework

Display subpages of WordPress site in a dropdown menu on the navigation bar

Currently in the process of converting an HTML website to Wordpress, I am encountering a challenge. The issue lies in my attempt to add a drop-down feature to the navigation list using the wp_list_pages tag. As it stands, when hovering over the "products" ...

phphtmlcsswordpressdrop-down-menu

Background image not displaying

My web page has a background image set using this CSS: body, html { background-image: url(Content/Images/bg-lounge-2-l.jpg); background-repeat: repeat; background-attachment: fixed; /*background-position: 0 -390px;*/ } ...

css

Clicking on the modal will trigger its closure

Is there a way to prevent Bootstrap 4 modal from closing when the user tries to leave the page but clicks on it instead? I have attempted various solutions from this platform, but none have worked for me. I am running out of ideas. This snippet shows my ...

jqueryhtmlbootstrap-4

Assistance with changing styles

Hey there, I could really use some assistance. I've created a style switcher, but I'm struggling to figure out how to replace the stylesheet properly. Currently, my code empties the <head> element when what I really need is for it to simply ...

javascriptcssajaxjquery

Placing text to the right of an image inside an <li> tag

Struggling with a simple alignment issue in my code and just don't have the time to figure it out. I have two lists, each containing images and text, but I need the text to align to the right of the images instead of wrapping underneath. Here is an ex ...

htmlcsstwitter-bootstrap

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

Adding a border around the `<tr>` elements in a table

How can I add a border to the <tr> element (t_border), without the inner table inheriting the style from the outer one? <table> <tr> <td>A</td> </tr> <tr> <td> <ta ...

htmlcss

What could be causing the .remove() method to malfunction in my current environment?

I'm new to jQuery and struggling with the .remove() method. Despite finding similar questions, I'm still unable to solve my issue. Within an HTML file, there's a form alongside a div acting as an alert box, indicating whether the form was v ...

jqueryhtmlcss

Using jQuery to dynamically render unordered lists from JSON data

Struggling to create a dynamic unordered list with multiple nested levels? Finding it difficult to render the necessary markup for future functionality? Take a look at the HTML structure I've created on this jsfiddle link: <ul class="nav nav-sideb ...

javascriptjqueryhtmlarraysjson