Having trouble aligning three buttons next to a contact form. Placed them in a row class but the buttons keep falling below the form. Even tried using float: right but they still end up underneath. Any assistance would be appreciated, thank you!
If you want to take a look, here is the link to the page with the contact form and buttons at the bottom.
combine them in a single row:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="container shapef">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<br>
<div class="form-group">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-9 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-9 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="Email Address" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Message</label>
<div class="col-md-9 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting me, I'll get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-2 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-lg-6 kopcheta">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://github.com/l-emi" target="_blank" class="btn btn-default btn-lg btn-warning"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://uk.linkedin.com/in/lidiya-nikolova-b979348b" target="_blank" class="btn btn-default btn-lg btn-warning"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="https://www.freecodecamp.com/l-emi" target="_blank" class="btn btn-default btn-lg btn-warning"><i class="fa fa-fire fa-fw"></i> <span class="network-name">FreeCodeCamp</span></a>
</li>
</ul>
</div>
<!-- /.container -->
</div>
</div>
</div>
For my project, I'm interested in utilizing jquery-mobile through bower. In order to do so, I need to execute npm install and grunt consecutively within the bower_components/jquery-mobile directory to access the minified .js and .css files. This pro ...
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...
I am facing an issue with a container div that contains multiple items. The container requires a border, but the problem arises when I float the elements left within the container, as it seems to disrupt the flow of the elements. Adding a border to the co ...
Within my express application, I am attempting to load the style properties from a styles module engine. Unfortunately, I am facing difficulties in loading my style. Here is the structure of my folders: myNodeApp -node_modules -styles - ...
After comparing two pages, one using Bootstrap v5.1.1 and the other with 4.0.0, I have observed differences in spacing. Bootstrap v5.1.1: .topspacer { padding-top: 70px; } .righticon { float: right; } .clear { clear: both; } a { text- ...
I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...
Can someone assist me in embedding my HTML code into a button so that when the button is clicked, my code executes? function loadProgressBar() { var bar = document.getElementById('progressBar'); var status = document.getElementById(&ap ...
Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...
I am facing an issue with the second <ul> on my webpage, which contains more content compared to the first one. In this second <ul>, the last line is appearing floated to the left and does not appear below the penultimate line as expected. Li ...
I'm attempting to create a toggle effect for a background image on a links within an FAQ accordion using javascript. After referencing this jsfiddle example (http://jsfiddle.net/QwELf/), I was able to get things to function. You can view my page in ...
I am working with a Bootstrap 5 List Group element on my webpage. To enhance its visual appeal, I want to include oversized Font Awesome icons. After some styling and using a span tag, I managed to add the icon successfully. However, the issue I am facing ...
Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...
My problem is that small squares on my page are appearing way below where I want them to be, leaving a lot of white space above. I've tried setting them to position: fixed;, but then everything slides off when scrolling down the page. Any suggestions ...
My inquiry is similar yet slightly distinct from the one queried here: window.onload vs <body onload=""/> The comparison in that prior query was between utilizing window.onload and inline js. My question pertains to the disparity between ...
I'm struggling with passing a value from a text box in a web application to a Flask application. Despite my efforts, the request object in Flask does not seem to contain the data I need. Can anyone provide assistance with this issue? Below are the rel ...
Looking to center an icon within an "a" tag that spans the entire div container? The goal is to make the entire container clickable for carousel navigation, rather than just the icon itself. Currently, I can achieve each desired effect separately. On the ...
Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...
<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...
Could you assist me in positioning the buttons at the bottom center of the horizontal layout as depicted in the image below? Ps: the vertical layout at the top has a dynamic height. My HTML code is as follows: <html> <body> <div class="c ...
Is there a way to show varying HTML elements or components depending on the device size? In React, you can utilize a package called react-responsive. However, in Next.js, when using this package in a component, server-side rendering does not occur on tha ...