I'm looking for a way to position an element inside a row class.
Check out the JS Fiddle link: https://jsfiddle.net/jLhvmq24/2/
The small tag "Enter Business Email" needs to be displayed below the input box.
<div class="row">
<div class="input-group col-10">
<input type="text" class="form-control" placeholder="email address">
<small class="text-muted">Enter Business Email.</small>
</div>
<div class="col-2">
<button class="btn btn-light">Subscribe</button>
</div>
</div>
- To arrange the elements in a row, use the outermost parent element with the class of `row` and apply `flex-direction: row;` (it is the default display for flex).
- If you want the text to appear below the input field, add `flex-direction: column;` to the `.input-group` class.
Check out the fiddle example here
.row {
display: flex;
}
.input-group {
display: flex;
flex-direction: column;
}<div class="row">
<div class="input-group col-10 mb-4">
<input type="text" class="form-control" placeholder="email address">
<small class="text-muted">Enter Business Email.</small>
</div>
<div class="col-2">
<button class="btn btn-light" type="button">Subscribe</button>
</div>
</div>One way to tackle this issue is by utilizing grids.
Cascading Style Sheets (CSS)
.container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"input"
"small";
}
.input-1 {
grid-area: input;
}
.small-1 {
grid-area: small;
}
HyperText Markup Language (HTML)
<div class="row">
<div class="input-group col-10 container">
<input type="text" class="form-control input-1" placeholder="email address">
<small class="text-muted small-1">Enter Business Email.</small>
</div>
<div class="col-2">
<button class="btn btn-light">Subscribe</button>
</div>
</div>
To eliminate the padding, you can override it within the Bootstrap cols classes.
My attempt to vertically center some h2 text within a div using display:table-cell along with vertical-align: middle is not successful. The issue seems to be arising because the div I want to center the content in is nested inside another div. Below are ...
The Bootstrap v4.0 grid system has introduced a new way of offsetting columns that I'm struggling to understand. The documentation doesn't provide much clarity on this. In previous versions, I was able to offset a column by a specified value like ...
Bootstrap 4 is being utilized for my current project, I am looking to modify the rotation of the chevron icon in a multi-level dropdown menu specifically on mobile devices when the parent link is tapped, Here is the code snippet for the multi-level dropd ...
I'm facing an issue with positioning my button to the right. Despite my best efforts, I haven't been able to move it more than a few positions. In summary, here are the scenarios I've encountered while trying to solve this problem: When I ...
I have a project similar to an Etch-a-Sketch in progress. The main challenge I am currently facing is how to gradually darken each cell of the grid with every pass of the mouse cursor, based on the opacity of the cell being hovered over. When the grid cell ...
I am currently working with Bootstrap v4 to build a carousel featuring an image with caption text. My goal is to have the image faded while leaving the text unaffected. Despite trying several non-Bootstrap solutions, I have been unsuccessful in achieving t ...
In one of my defined less files, I have the following code: //style.less .ant-modal-close-x { visibility: collapse; } Within a component class, I am using this less file like this: //testclass.tsx import './style.less'; class ReactComp{ re ...
I am facing an issue with the hamburger icon on my website. The toggle functionality associated with it is not working properly. Even though I have a class named change-1 that should be toggled upon clicking the icon, it is not happening. There are no erro ...
This task seems deceptively simple, yet I am struggling to find a straightforward solution. Language: (HTML) <div class="col-6-12 subcontent-outer"> <div class="subcontent"> <h1>Header</h1> ...
I've been struggling to modify the border color in my bootstrap file despite using all of my expertise. Below are the class names and corresponding colors within the brackets: .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border ...
I'm curious about how they created the background on the page found at The background is not just a plain color - could it be an image that scales to fit the whole page? Or is there some CSS trickery involved? I noticed in the CSS that the body elem ...
Can you explain why there is a gap between the top of the green box and the browser window in Chrome and Firefox? I've tried various CSS configurations to eliminate the apparent space between the html and body elements, but it seems that some padding ...
While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...
Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...
I've been working on this external jQuery code: jQuery(document).one('keydown', 'g',function (evt){ if ($("#tb").html() == "0") { $("#tb").html("Testing the chicken.") } else {$("#tb").html("Chickens fart too." ...
I'm looking to make some changes to the "categories" block in my left navigation column. Currently, it appears like this: https://i.sstatic.net/MpUD5.png I would like it to look like this by default: https://i.sstatic.net/fJTr8.png Here are the mod ...
Don't worry, this isn't your typical "can't load files from the server" query... I'm looking to allow users to view files on the server in a bootstrap modal and then select specific files. After selection, I want to close the modal and ...
Is there a way to display the header only in a small size using the col-sm-* class of the div inside a container? It seems like the col-sm-* class is not working correctly and not floating them properly. <link href="https://maxcdn.bootstrapcdn.com/b ...
My JavaScript code below is used to recursively reload a specific DIV with the results of a data query. The issue I'm facing is that each time the DIV, identified by id="outPut", is reloaded, all the data fades in and out due to the fadeTo function. ...
Here is my TabPane: https://i.stack.imgur.com/Ihxmn.png I've been attempting to eliminate the padding. Some suggestions on SO led me to try this: <TabPanel value={value} index={i} classes={{ "& .MuiBox-root" ...