Tips for positioning items inside a container

I'm struggling to align a button with text inside of a well.

Here is what I currently have:

<div class="container">
    <div class="row">
        <div class="col-lg-12">
             <div class="well"><h4>Download our 2016 Registration form today!<button type="btn" class="btn btn-default centered">Download Now!</button></h4>
             </div>
         </div>
     </div>
 </div>

CSS on the button:

.btn {
background-color: #FFF;
outline-color: #000;
}

Despite my efforts, I can't seem to create space between the h4 and the button. They appear too close together, and adjusting padding and margin does not solve the issue.

Previously, I attempted placing the h4 and button in separate columns, but I couldn't get them to align properly horizontally.

After researching some posts on github https://github.com/twbs/bootstrap/issues/16933 .... https://github.com/twbs/bootstrap/issues/1446, it seems like this problem has been persistent for a while.

I chose to use a well because I want the h4 and button to be closely positioned within a red border to grab attention.

Any suggestions?

jqueryhtmlcsstwitter-bootstrapdreamweaver

Answer №1

Create a Beautiful Weave:

To achieve this, you can utilize media queries.

CSS Styles:

.btn {
  background-color: #FFF;
  outline-color: #000;
  display: inline-block;
  float: right;
  margin: -9px 0;
}
.well {
  text-align: left;
}

@media all and (max-width: 575px) {
  .well {
    text-align: center;
  }
  .btn {
    display: block;
    clear: both;
    float: none;
    text-align: center;
    margin: 20.92px auto;
  }
}

Answer №2

Many people opt to utilize a <table><table/> in order to ensure their text remains aligned. By placing the button and text within a table that consists of one row and two columns, you can achieve this.

<table>
    <tr>
        <td>
            TEXT
        <td/>
        <td>
            BUTTON
        <td/>
    </tr>
<table/>

If you take a look at various websites (including this one), you'll notice that the layout is essentially created using a large table structure containing buttons, textboxes, and images within each tile.

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

Working with jQuery conditionals to manipulate JSON data

I'm working with JSON data that includes a field like this: "first_date": "2015-06-02" Using jQuery, I want to achieve something like this: if( valueOfFirstDate.substring(5, 6) == "06" ){ //change 06 to "June" } Can anyone guide me on how to e ...

javascriptjqueryjson

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Seeking a solution to use a custom table as the dropdown portion for a DropDownList in my project. My goal is for users to see the custom table when they click on the DropDownList, rather than the default dropdown menu. I expected to be able to achieve th ...

javascriptjqueryasp.netdrop-down-menuinternet-explorer-7

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Accessing a global variable in AngularJS while using ng-data-repeat functionality

Currently in my Angular project, I am displaying block information using the ng-data-repeat directive and accessing various values. Below is a snippet of a table utilizing this repeat feature: <tr class="fader" ng-repeat='b in blocks'> ...

javascripthtmlangularjs

Python script unable to locate div popup using Selenium

Recently, I've been working on enhancing my selenium skills, but I'm facing a challenge in finding a solution to this particular issue. While experimenting with the functionality of the page located at: www.omegle.com When using selenium to cli ...

pythonhtmlcssselenium-webdriveriframe

disable the form submission function in dropzone when buttons are clicked

Dropzone is being utilized on my page in the following manner alongside other input types such as text and select dropdowns: <form name="somename" method="post" action="/gotoURL" form="role"> // Other form elements here <div id="dropare ...

javascriptphpjqueryajaxforms

Switch back emulation when moving away from page - using angular javascript

I have a unique scenario in my component.ts file on a specific page where I need to incorporate custom CSS for printing purposes: @Component({ selector: "dashboard", templateUrl: "./dashboard.component.html", styleUrls: ["./d ...

javascripthtmlcssangularencapsulation

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

"Troubleshooting JSON parsing in jQuery: one code successfully parsing data, the

These are the snippets of code I have for parsing a JSON response from the server, along with the corresponding responses. The first code seems to be functioning correctly, however, the second code is not producing the desired result. Can you provide any ...

jqueryajaxjsonrestjsonp

What is the best way to seamlessly transition from responsive design to mobile design?

While developing a single-page app, I encountered an issue with the layout when the screen width reaches a specific point. On narrow screens, I prefer to utilize the full width, but for wider screens, I want to limit the width for better readability. The l ...

htmlcsssafari

Removing background color when clicking and dragging using CSS

I'm facing an issue with a resizable div that is cropping part of my webpage. Whenever the mouse moves and clicks on the titles and images, a background color appears, as seen in the picture below. Can someone please help me resolve this problem? htt ...

css

Use two separate AJAX requests to open and close the modal dialog

I am experiencing an issue with my subscription form that uses modal windows. After closing the window and trying to subscribe again, the ajax calls are being duplicated, resulting in an error. $("#openModal").click(function() { if($("#wname").val() = ...

javascriptphpjqueryajax

What is the best way to ensure that a nav-item is the correct width to display its content in a single line?

I want to ensure that my nav-item elements have enough width to display their content on a single line, as currently the content is wrapping onto two lines: Sample Code: https://jsfiddle.net/tavyhkem/2/ <ul class="navbar-nav mt-2 mt-lg-0"> ...

htmlcsstwitter-bootstrapbootstrap-4

Unable to display an image loaded through jquery without fading

I'm relatively new to using jQuery and I'm having trouble understanding why the image on my website isn't fading in as described in the jQuery documentation. <!DOCTYPE HTML> <html lang='en'> <head> <meta charse ...

jqueryimagefadein

What is the most efficient method for adding each unique unordered list element with a specific class to the nearest parent article tag

The current code structure looks like this: <article id="post-529"></article> <ul class="post-meta"></ul> <article id="post-530"></article> <ul class="post-meta"></ul> <article id="post-531"></a ...

javascriptjqueryappendclosest

Add a fresh record only if it contains information and there are no existing duplicates present

Is it possible to create a note with both a title and text, under certain conditions? The title must not be empty The title cannot already exist in the system When attempting to check for duplicates within my array, the boolean value always returns true ...

javascriptjquery

Animating the movement of a div

How can I move the div "#menu" to the side when it's clicked on? I've tried the following code: <script> $("#menu").click(function(){ $("this").animate({ marginLeft: "+=250px", }, 1000 ); }); < ...

javascriptjqueryhtmlclick

Botched HTML and CSS layout

Looking at someone else's project and trying to improve the design without modifying the CSS. Struggling to figure out how to rearrange it in HTML. Any suggestions? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

phphtmlcss

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

I am currently in the process of creating a blog platform. My goal is to allow users to input keywords on my site and search for images directly within the website. This way, I can easily retrieve the URL of the desired image. ...

javascriptjqueryhtmlcssjsonp

What is the best method for calculating income and expenses within a JavaScript expense tracker?

I'm facing an issue where I can't add the value of a checked radio button to an object in a different function. Even though there are no errors, nothing gets added. My project involves creating an expense tracker, and adding either income or exp ...

htmljavascript-objects