I need help aligning buttons to make my web application responsive. The buttons are properly aligned on a large screen:
Here is an example of when the buttons are not aligned correctly:
This is a snippet of the code I am using for the buttons:
body{
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
#message_bienvenue{
margin: 10px;
text-align: center;
width: 100%;
}
/* More CSS styles here */
Run code snippet --> Full page --> Reduce your browser border to the minimum.If you need to create a button with a circular shape, you can achieve this by using the btn-circle class and applying the following CSS code:
.btn-circle {
width: 40px;
padding: 0;
margin: auto;
height: 40px;
}
I hope this solution works for you!
If I understand your question correctly, it seems like you want to maintain the alignment of the buttons so that they remain in a row on one line, just as they are in the desktop view. To achieve this, you can add a property and value to the '.justify-content-around' class like so:
.justify-content-around {
flex-wrap: nowrap;
}For a comprehensive guide on using flexbox CSS effectively, check out this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Alternatively, you may consider optimizing the button alignment for mobile devices which might require some adjustments. Simply resizing the buttons slightly in the mobile view could be beneficial. In such cases, combining my suggestion with Udayavani's solution, utilizing a media query at the desired breakpoint, would be helpful:
@media (max-width: 768px) {
.btn-circle {
width: 40px;
padding: 0;
margin: auto;
height: 40px;
}
}To learn more about media queries, refer to this useful link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
To structure each div in a row using Bootstrap col, follow this format:
<div class="container-fluid" style="margin-top: 0 !important">
<div class="row justify-content-around">
<div class="col flex-column align-items-center block-mission">
<button class="btn btn-circle btn-small btn-1" id="creer_mission_replacee" name="type_voyage" value="Replacé" type="submit">
</button>
<label>Voyage validé replacé</label>
</div>
<div class="col flex-column align-items-center block-mission">
<button class="btn btn-circle btn-small btn-2" id="creer_mission" name="type_voyage" value="Livré" type="submit">
</button>
<label>Livraison effectuée validée</label>
</div>
<div class="col flex-column align-items-center block-mission">
<button class="btn btn-circle btn-small btn-3" id="creer_mission_annulee" name="type_voyage" value="Annulé" type="submit">
</button>
<label>Voyage annulé</label>
</div>
</div>
</div>
For reference and demo, visit:https://jsfiddle.net/sugandhnikhil/gkduhbs2/
If you prefer the horizontal alignment, consider eliminating the "row" class, although you may need to adjust the button text size for a more polished appearance.
.main_container{display:flex;
justify-content:center;
flex-direction:row;
}
.btn {
width:100%
}This code snippet will automatically align your elements based on the screen resolution.
I currently have a website that showcases news articles in a list format using PHP and MySQL. You can check it out here: My goal is to incorporate a Facebook share button/link on each article so that users can easily share individual posts on their own Fa ...
I need to figure out how to get the smaller div box to display properly within the larger div. Every time I try to drag and drop it, the result is not what I expect: What could be causing the border of the small box to not show correctly in the larger bo ...
A few months ago, I dabbled in web design and created a basic website. Now, I'm revisiting it to clean up the layout and make it more visually appealing. I initially used non-breaking spaces to separate paragraphs, but I know that's not optimal. ...
Forgive me if this question has been asked before in a similar way. I have multiple test applications that operate on different platforms such as Windows 95, Windows XP, SUSE, RedHat, and other variations of UNIX. Currently, the process involves a native a ...
I've been working on a website that includes a page where users answer questions and based on their selections, they receive one of two possible answers. If "yes" is chosen, it indicates failure, while selecting all five as "no" results in a passing g ...
Is it feasible to utilize Javascript/JQuery and HTML5 to write data to a server and save it as a text file? I am currently working on a game using JavaScript and JQuery, and I need to store the scores without relying on any server-side language like PHP ...
I am looking to store a variable that can be retrieved from JavaScript and then utilized in PHP upon form submission. For this purpose, I have added an input field in the HTML code: HTML <input type="hidden" name="videoname_var" id="videoname_var" me ...
Utilizing Jquery to dynamically update a list based on dropdown selections. After successfully fetching data and constructing the correct HTML content within the "item" variable, applying .html(item) does not result in the expected HTML updates. <div c ...
Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...
I'm currently facing an issue with adjusting the height of "footer a" links that are using Fontface vector icons in the footer. I have added a red border around them to visually identify the problem. Ideally, when navigating through the links, the bor ...
While working in web-mode and editing an html file, I find myself needing to use M-x company-bootstrap to display a list of possible values for a class in an html tag. <p class="M-X company-bootstrap here .."> Is there a way to automatical ...
I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...
When using a PC with Chrome 25 (non beta), I see a microphone icon that prompts for input when clicked. After speaking, my alert call is successfully executed. However, on a Galaxy Note smartphone with Chrome 25 and an Android 4.04 operating system, the sa ...
I have been studying web development through the "PHP and MongoDB Web Development" book, where they provide a code snippet for creating a blog post creator. <?php $action = (!empty($_POST['btn_submit']) && ($_POST['btn_submit&apo ...
I'm facing some challenges in achieving the fade out effect in Bootstrap 5 modals. I am aiming for something similar to the "Fade In & Scale" effect demonstrated here: https://tympanus.net/Development/ModalWindowEffects/ It is crucial for me to accom ...
My DIV is configured with overflow-y set to scroll. .scrolling-div { width: 85%; height: 200px; overflow-y: scroll; } If I have an abundance of content within this div, my goal is for it to automatically scroll to the bottom upon loading the page. I am ...
When I use Initializer to quickly generate HTML5 + Boostrap boilerplates, I noticed that the HTML document it creates does not include an opening <html> tag. This got me curious. Here is the beginning portion of the code generated by Initializr: &l ...
I've been working on a personal project that I'm really enjoying, but I noticed that my bootstrap 4 navbar and banner have slightly different lengths, causing a slight horizontal scroll. Despite having hidden overflow in my banner and using perce ...
Incorporating AJAX to transmit the content of a div to my C# MVC controller. The structure of the AJAX post is as follows: $.ajax({ url: '/Home/SaveContent', type: 'POST', data: { model: modelDataJson, activ ...
The article I'm currently reading discusses the concept of "Inheritance Uses Computed Values." According to the chapter, computed values are essential for inherited values such as font sizes that utilize lengths. These values are relative to other ele ...