What is the best way to increase the distance between the text box and the Bootstrap HTML form that I have set up on this page?

Can someone please assist me with creating space between these two elements? Here is a screenshot of the footer on imgur.

https://i.sstatic.net/2X80L.png

I attempted to add margin-right to the detail-box, but it ended up shifting the HTML form below it. Any suggestions or solutions would be greatly appreciated. Thank you!

<footer class="page-footer red">
  <div class="container">

    <div class="row">
      <div id="detail-box" class="col-md-6">
        <h5 class="font-weight-bold adres"><i class="fas fa-map-marker-alt"></i>Adres</h5>
        <p>Kıbrısonline Lefkoşa Merkez Ofisi, Bedreddin Demirel Cad. Arabacıoğlu APT. no:121 Yenişehir - Lefkoşa - P.K. 500 Mersin 10 TURKEY</p>
        <h5 class="font-weight-bold merkez"><i class="fas fa-phone-volume"></i>Cagri Merkezi</h5>
        <p>+90 (392) 444 0 433</p>
        <h5 class="font-weight-bold email"><i class="fas fa-envelope-square"></i>Email</h5>
        <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa7a6b5a2aabb8fa4a6adbda6bca0a1a3a6a1aae1aca0a2">[email protected]</a></p>
        <h5 class="font-weight-bold email"><i class="fas fa-envelope"></i>Email</h5>
        <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117a64..."></a></p>

        <h5 class="font-weight-bold">Bizi Takip Edin:</h5>
        <span><a href="#" class="text-white"><i class="icons icon-social-instagram footer-icon"></i></a></span>
        <span><a href="#" class="text-white"><i class="icons icon-social-facebook footer-icon"></i></a></span>
        <span><a href="#" class="text-white"><i class="icons icon-social-twitter footer-icon"></i></a></span>
        <span><a href="#" class="text-white"><i class="icons icon-social-linkedin footer-icon"></i></a></span>


      </div>
      <div class="col-md-6">
        <form action="" class="row">
          <div class="col-md-6 py-1">
            <input type="text" class="form-control" name="Ad" placeholder="Adiniz*">
          </div>
          <div class="col-md-6 py-1">
            <input type="text" class="form-control" name="Soyad" placeholder="Soyadiniz*">
          </div>
          <div class="col-md-6 py-1">
            <input type="email" class="form-control" name="E-posta" placeholder="E-posta*">
          </div>
          <div class="col-md-6 py-1">
            <input type="tel" class="form-control" name="Telefon" placeholder="Telefon*">
          </div>
          <div class="col-md-12 py-1">
            <textarea class="form-control" name="Mesaj" placeholder="Mesajiniz*"></textarea>
          </div>

        </form>

        <button id="gonder" type="button" class="btn btn-outline-danger"><i class="far fa-paper-plane"></i>Gonder</button>


      </div>

    </div>
    <hr class="border-white" />
    <div class="row align-items-center">
      <div class="col-4">
        <img src="/assets/img/kol-logoldpi2.svg" class="img-fluid" />
      </div>
      <div class="col">
        <div class="copyright">
          <p>© 2018 Copyright Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          <p>Made with <span style="color: #e25555;">&#9829;</span> by a man from The United Kingdom of Great Britain and Northern Ireland.</p>
        </div>
      </div>
    </div>
  </div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Check out this flexbox solution:

https://example.com/flexbox-solution

<div class="wrapper">
  <div class="box1">
    <div style="background: green;">
      top
    </div>
  </div>
  <div class="box2">
    <div style="background: yellow;">
      bottom
    </div>
  </div>
</div>

Answer №2

To contain that specific portion, enclose it within a div element and specify a max-width. Here's an example to follow:

<div id="info-container" class="col-md-6">
     <div class="info-wrapper" style="max-width: 350px;"> 
        <!-- include the remaining code here -->
     </div>            
</div>

If needed, adjust the width to 100% for smaller screens.

Answer №3

div#detail-box {
    max-width: calc(50% - 30px) !important;
    margin-right: 30px;
}

To adjust the margin to the right in your CSS, simply modify the value like this: Increase the number from '30px' to '50px' as needed in both properties For example: {max-width: calc(50% - 50px) !Important;} {margin-right:30px;}

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

JavaScript quiz featuring randomized questions with selectable radio buttons

I need assistance in creating a feature on my webpage where users can select the number of questions they want to answer (ranging from 1 to 10). The selected number of questions should then be displayed randomly, without any duplicates. I am not very famil ...

javascriptjqueryhtml

Pondering the importance of the "zoom" feature in creating responsive designs

Currently, I am working on creating a responsive design using HTML and CSS. However, I have encountered an issue that I need help with: When resizing the window, the layout adapts perfectly. Similarly, when zooming in or out without resizing the window, e ...

csslayoutresponsive-designzooming

Retrieving data from a database using twig

In my PHP code, I currently have the following: $vals['followers'][] = R::find('follow', 'following_id=?', array($_GET['id'])); This code returns all followers in the "follow" table with a following_id that matche ...

phphtmlarraystwig

Overlap three images in Bootstrap v5

I'm new to posting on StackOverflow and I need help with a website design issue. I've been working on creating a landing page with 3 images clipped at an angle, but I can't seem to remove the white space between them or make them resize prop ...

htmlimagelayoutbootstrap-5

Having trouble with your Bootstrap 4 carousel?

I'm having trouble with my BS4 Carousel code. I followed this tutorial here to create it, but it's not functioning properly. The first image displays but the carousel isn't controllable and doesn't move to the next image. Does anyone kn ...

htmlcsscarouselbootstrap-4bootstrap-carousel

Tips for keeping an absolute element aligned within a flex-parent that is constantly changing

I'm facing an issue with banners overlapping images inside a flex-box. When the flex direction is set to row, everything aligns perfectly based on CSS. However, switching to column orientation causes them to stack at the top and cover one another. < ...

htmlcssflexboxabsolute

Utilizing jQuery to perform a single request for an Ajax call

I have implemented a "popover" effect on my products using the code below. The popover content is fetched via Ajax and I am utilizing Twitter Bootstrap popovers. My issue is that the Ajax call is made every time I hover over a product. Is there a way to op ...

jqueryajaxtwitter-bootstrap

Display a petite popup above the selected text within the Code Mirror editor

I have been utilizing the following code snippet to highlight text segments in Codemirror, a renowned code editor and syntax highlighter that can be downloaded from this link. Despite referring to the documentation, I am still unable to grasp how this fun ...

htmljquerycsscodemirror

Safari scrolling with a sleek black background

When I overscroll over the viewport in Safari, a black line appears on the app in all directions. However, in Chrome, this line is white. Even though I have "theme_color": "#ffffff" set in my manifest.json, the issue persists in Safari ...

htmlcssreactjssafari

Avoiding submission of form when validation is unsuccessful (Angular Materials)

Recently, I stumbled upon Angular and Material design, and I must say, I am impressed by the plethora of features they offer right out of the box. One of my projects involved creating a contact form with validation, ensuring error messages pop up when a fi ...

javascripthtmlangularjsforms

Necessary CSS selector input equivalent in Reactive Forms

Is there a similar CSS method like input:required {CSS} to style all the reactive form fields in Angular that are set as required using Validators.required in their formControl? Or is there another approach to achieve this with CSS? ...

angularcssangular-reactive-forms

Sending ZipOutputStream back to browser

Looking for a way to return a ZipOutputStream to the browser? I want the user to click on a link and have a file download prompt appear for the ZipOutputStream I have. How can I achieve this desired experience? ...

javahtmlhttpzip

I'm encountering an issue trying to launch bigbluebutton HTML5. I attempted to initiate it using "npm start" after installing it with "meteor npm install," but unfortunately, it failed to

I've been attempting to launch the Development environment for bigblubutton-html5, but unfortunately, I encountered an error message after executing this command: npm start Please refer to the tutorial I used: Here's the error message that was ...

htmlnpmmeteorbigbluebutton

Unique layout design that organizes calendar using nested divs with flexbox - no

I am having difficulties achieving the desired outcome with my calendar header layout implemented using flexbox for the years, months, and days. What could be the issue? Is it due to the structure of the HTML or is there something missing in the CSS? The ...

htmlcsscalendarflexbox

Shift the position of an <img> downwards by 50% of its height while maintaining the flow of the elements

Consider this snippet of code below <div> <img src="http://www.lorempixel/100/200" /> <p> Bla bla bla bla </p> </div> I am trying to figure out how to move the image 50% of its height and also adjust the ...

csshtmlresponsive-design

Scrolling in Bootstrap 4 Cards conceals the fixed Header

Here's some HTML code featuring Bootstrap 4 elements. It showcases a fixed Header and Footer with scrollable Bootstrap Cards in between. When scrolling, the Headers may be hidden by the Cards. How can you adjust the layout so that the Cards scroll "be ...

htmlcssbootstrap-4scrollbootstrap-cards

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

javascripthtmlangularjsangularjs-directive

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom

What is a sneaky way to conceal CSS specifically from iPhones without affecting other browsers?

I have a solution to conceal CSS from all browsers except for iPhones. You can find the details here: How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing? Now, my question is: How can I hide CSS specifically from iPhones ...

iphonecssiosmedia-queries

Customize the switch option in your data tables

Currently, I am attempting to integrate a custom switch feature into my Datatables setup. To achieve this, I have implemented the following function that includes an Action column in Datatables: function getdata(Request $request) { if(request()->aj ...

htmljqueryajaxlaravel