Tips for adjusting the horizontal spacing of a Bootstrap form

Take a look at the layout of my django filter form:

https://i.sstatic.net/HAvcM.png

I'm trying to add some horizontal spacing so that 'Name contains' section and the search bar, as well as 'result' are not too close together.

Here's the snippet of my html code:

<form action="" method="get" class="form-inline text-white justify-content-center mx-3">
   {{myfilter.form|bootstrap}}

 <button class="btn btn-primary" type="submit">
   Search</button>

</form>

I've attempted adding m-3, mx-3 but they haven't been effective. Any suggestions would be greatly appreciated. Thank you!

htmlcssdjangobootstrap-4

Answer №1

Let me begin by explaining that applying the m-3 or mx-3 class to the form tag will give margin specifically to the form tab, with elements such as Name contains, search bar, and result being child elements of the form.

The mx-3 class will only take effect when added to a particular element.

To resolve your issue, you can either add class="mx-3" to each form element or apply the following CSS:

HTML

<form action="" method="get" class="weekly_calls_form form-inline text-white justify-content-center">
  {{myfilter.form|bootstrap}}
  <button class="btn btn-primary" type="submit">Search</button>
</form>

A custom class weekly_calls_form has been added to the form tag for applying CSS to all its elements.

CSS

.weekly_calls_form > *{
  margin: 0px 5px;
}

This CSS rule applies to all direct child elements of the form.

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

Tips for populating a textfield with data from a <select> dropdown using javascript

Is there a way to populate a textfield with data automatically based on information provided in the tab, utilizing JavaScript? Additionally, is it possible to prevent the filled data from being edited? The textfield should be able to dynamically fill data ...

javascripthtml

The content is stationary as the side menu slides open and closed

I have successfully implemented a sliding side menu in my angularjs+bootstrap3 app using CSS. However, I am facing an issue where the content on the right side does not follow the menu when it slides out of view. Here is the desired effect that I am aimin ...

jqueryangularjscsstwitter-bootstrapangularjs-directive

Make sure to have the list available while choosing an item

I want to design a unique CSS element with the following characteristics: Include a button. When the button is clicked, a list of items (like a dropdown list) should appear. We should be able to select items by clicking on them, and the parent component s ...

cssreactjsdrop-down-menufluent-uifluentui-react

Background image changing due to React re-render

I'm working on a React component that generates a random background image each time a user visits the page. However, I'm facing an issue where the background image updates every time a user types something into an input field. I've tried usi ...

cssreactjs

Element on navigation bar extending full width of the page

As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the e ...

htmlcssbuttondisplaynavigationbar

Discover the two words before and after a span element using jQuery

data-color="red"I am looking for 2 words before and after the span tags. Here is the html code: <p>This pathway has an inner and an outer wall. The pressure <span data-color="red" class="highlight">inside the</span> eye closes the tun ...

javascriptjqueryhtml

Adding the target='_parent' attribute to the infowindow of a Google Fusion Map by utilizing a click event listener

As someone who is relatively new to Google Fusion, I am eager to expand my knowledge and skills. Recently, I created a customized map with an infowindow and embedded it onto my website using the FusionTablesLayer Wizard. I wanted to avoid using the target= ...

htmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

javascripthtmlreactjsascii

The lobster custom font is malfunctioning in Internet Explorer

I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...

htmlcssfonts

Text that is selected within a contenteditable div: Find the beginning and end points of the highlighted text

<div contenteditable="true">This text is <b>Bold</b> not <i>Italic</i> right?</div> For instance, if the text appears in a bold format, but not italic and the user selects it, how can I determine the exact position ...

javascriptjqueryhtmlcss

Code for switching between accordion panels with a simple button press

I took some code snippets from a website and developed a shopping cart accordion module. The complete code is available on my CodePen profile, you can access it through this link: http://codepen.io/applecool/pen/YXaJLa <div class="summary"> <but ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to eliminate the additional space on the right side of this bootstrap 4 modal?

Take a look at this fiddle: https://jsfiddle.net/apo5u0mt/ Below is the code snippet: HTML <div class="modal" id="galleryModal"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"> <div class="modal-con ...

htmlcssbootstrap-4bootstrap-modal

Tips for displaying a specific JSON element when using interpolation in Angular

How can I display a specific element from a JSON object using Angular interpolation? public responseData:any; renderTokenCard(){ this.mundipaggS.checkToken().subscribe((response:any)=> { console.log("success: ", JSON.stringify(res ...

javascripthtmlangular

"Bootstrap 4 does not allow labels to be displayed inline with the input field

I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file. <div v-for="problem in problems"> <div class="row"& ...

htmlcssvue.jsbootstrap-4label

What is the best way to connect a line from the edge of the circle's outermost arc?

I am attempting to create a label line that extends from the outermost point of the circle, similar to what is shown in this image. https://i.sstatic.net/OqC0p.png var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("cl ...

javascripthtmlcssd3.jssvg

What are the steps to clipping a canvas using CSS clip-path?

When it comes to clipping a canvas, there are multiple methods that can be used. One way is to create a path with getContext('2d') and set globalCompositeOperation. Another method involves using -webkit-clip-path or clip-path, though the latter m ...

javascriptcsshtmlcanvaswebkit

Applying a live status to a particular component (Navbar)

Currently, I've been diving into creating a navbar and wrestling with some jQuery code that was passed my way. I'll be sharing my code below, along with a Codepen link (https://codepen.io/JustNayWillo/pen/aXpKbb) for a better understanding of th ...

jqueryhtmlcssnavigationnavbar

Tips for transforming videos into base64 format with the help of jquery and phonegap

After attempts to obtain video data in base64 using JavaScript with Phonegap, I am encountering difficulties. function captureVideo() { navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1}); } function captureSuccess(med ...

javascriptjqueryhtmlcordovahtml5-canvas

Strange behavior exhibited by the HTML DataList component within an Angular application

I have created a simple component that displays a list of data and allows users to add new entries. <h6 *ngIf="withHeader"><label for="select"> {{title}} </label></h6> <label *ngIf="!withHeader" [ngClass]="{'required&apos ...

javascripthtmlangulardomhtml-datalist

Django: Error - Required field not found in query result

I'm hitting a snag when trying to query the CalculatedAmt field in my database. Strangely, the error code claims that the field doesn't exist. However, I have definitely included it in my Models.py and it's visible in my admin interface on D ...

djangodjango-models