Having trouble with the alignment when using bootstrap CSS.
My desired layout is as follows:
Place name: dropdownbox
Gender
(radio-button)Male (radio-button)Female
Amount
Max: textbox Min: textbox
Any advice on how to achieve this?
Having trouble with the alignment when using bootstrap CSS.
My desired layout is as follows:
Place name: dropdownbox
Gender
(radio-button)Male (radio-button)Female
Amount
Max: textbox Min: textbox
Any advice on how to achieve this?
Check out my solution:
<div _ngcontent-c0="" class="form-group" style="">
<label _ngcontent-c0="" class="col-xs-3 control-label">Gender</label>
<div _ngcontent-c0="" class="col-xs-6" style="display: flex;">
<div _ngcontent-c0="" class="radio"><label _ngcontent-c0="">
<input _ngcontent-c0="" name="gender" value="male" type="radio"> Male </label>
</div>
<div _ngcontent-c0="" class="radio">
<label _ngcontent-c0=""><input _ngcontent-c0="" name="gender" value="female" type="radio"> Female </label>
</div>
</div>
</div>
I decided to include display: flex; in the following section:
<div _ngcontent-c0="" class="col-xs-6" style="display: flex;">
This method does the job. Nonetheless, it would be more beneficial to assign a class (other than col-xs-6) to it and apply display: flex; in your CSS stylesheet.
To achieve proper spacing, you should incorporate either margin-left or margin-right to one of the buttons.
Trust this explanation is useful.
Check out the updated code below:
<app-header></app-header>
<div class="container">
<form [formGroup]="form" class="">
<div class="row padding-top-xl">
<div class="col-sm-8">
<form id="basicBootstrapForm" class="form-horizontal">
<div class="form-group">
<label class="col-3 control-label">Place Name</label>
<div class="col-5">
<select class="form-control">
<option>USA</option>
<option>UK</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-3 control-label">Gender</label>
<div class="col-6">
<div class="row">
<div class="radio col-6">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio col-6">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<p>Amount</p>
<div class="row">
<label class="col-2 control-label">Max</label>
<div class="col-4">
<input type="text" class="form-control" name="firstName"/>
</div>
<label class="col-2 control-label">Min</label>
<div class="col-4">
<input type="text" class="form-control" name="lastName"/>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</form>
</div>
<appfooter></appfooter>With Bootstrap 4, you no longer need to use col-xs-6; the default is col-6:
xsgrid classes have been modified to not require the infix to more accurately represent that they start applying styles atmin-width: 0and not a set pixel value. Instead of.col-xs-6, it’s now.col-6. All other grid tiers require the infix (e.g.,sm).
My goal was to create a carousel that displays multiple images in one slide. However, I encountered an issue where once the fourth image is reached, the other three images are forcibly hidden. I want to give credit to the original creator of this code snip ...
I am currently facing some challenges with a specific feature on my website. I am trying to integrate Jon Raasch's "Simple jQuery Slideshow Plugin" into an existing site that was not originally built by me. However, when viewing the site in IE 9, two ...
I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...
I'm encountering an issue with the footer on my website. The margin: auto; command doesn't seem to be working for the list items in the footer. I want the items in the footer to occupy one-third of the width, but no matter where I place the marg ...
I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...
I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...
My goal is to have the font color change to blue when a user hovers over a link in my navigation bar. I've tried using the following CSS code: #nav a:hover{ color: #1B8AD8; background: none; text-decoration: none; } However, it's not working as ...
After creating a custom MUI TextField, I implemented the following styling: const CustomDisableInput = styled(TextField)(() => ({ ".MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "#000", color: "#00 ...
In the scenario where the maximum width is 1220px, I want to change the main display to column. This is what I have implemented: @media (max-width: 1220px) { .main { flex-direction: column; } However, when the width reaches 1220px, the image disap ...
Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...
Interested in transitioning from Bootstrap 4 to Bootstrap 5. Noticed that the container max-width appears different on the default setting. Any insight on why this is and how it can be adjusted to resemble Bootstrap 4? I'm a beginner with Bootstrap, s ...
Is there a way to hide a div on specific devices and show it on others without resorting to duplicating the code or using CSS hacks? This is my current approach: <div class="container"> <div class="row"> <div class="col-md-8 d-none d- ...
Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...
I'm interested in creating an app similar to Canva, but I'm not sure where to begin. I have a solid understanding of HTML and CSS, but my JavaScript skills are basic. I'm curious about the technologies they use. Is there a way to save HTM ...
<style type="text/css"> .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; } #no-blur{ z-index: 20; } .box{ position:absolute; height: ...
How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...
Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...
I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...
I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...
I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...