<div> arranged side by side with ample spacing

I am currently designing a footer titled 

<footer class="site-footer">
. This footer consists of a container 
<div class="container">
with 3 divisions inside it: one col-sm-12 col-md-6, and two col-xs-6 col-md-3. My goal is to have these 3 divisions displayed in the same block format with appropriate spacing between them.

To achieve this, I added the following CSS code:

.row{
  display: flex;
}

The class row contains these 3 divisions. The image below illustrates the layout I am aiming for: a gap between the About, Hot Offers, and Links sections while placing the social media profiles underneath on the right side.

Below is the complete code snippet for the footer:

.row {
  display: flex;
}
<!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Site footer -->
<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <h6>About</h6>
        <p class="text-justify">Paragraph about us.</p>
      </div>

      <div class="col-xs-6 col-md-3">
        <h6>Hot Offers</h6>
        <ul class="footer-links">
          <li><a href="#"> Offer 1 </a></li>
          <li><a href="#"> Offer 2 </a></li>
          <li><a href="#"> Offer 3 </a></li>
        </ul>
      </div>

      <div class="col-xs-6 col-md-3">
        <h6>Quick Links</h6>
        <ul class="footer-links">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Refund Policy</a></li>
          <li><a href="#">Sitemap</a></li>
        </ul>
      </div>
    </div>
    <hr>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
        <p class="copyright-text">Copyright &copy; 2021 All Rights Reserved by
          <a href="#">-</a>.
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <ul class="social-icons">
          <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

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

htmlcssbootstrap-4

Answer №1

To create space between your blocks, consider adding padding to your elements (specifically the 4 columns).

With Bootstrap, you can easily add spacing by using classes like "px-2" on each column. For example:

<div class="col-xs-12 col-md-3 px-2">

This will provide inner space on both sides of the column.

To learn more about spacing with Bootstrap, visit: https://getbootstrap.com/docs/4.0/utilities/spacing/

If you're not using Bootstrap, simply add a padding style property to your element as shown below:

.column{
   padding: 0 0.5rem // adds margin on right and left
}

If you want to align social profiles in the same row on the right, place your DIV elements within a parent DIV with the class "row", like this:

Ensure that each DIV has the class "col-md-3" for them to display on the same row from medium screens to extra-large screens.

For more information on Bootstrap's grid system, check out: https://getbootstrap.com/docs/4.0/layout/grid/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Site footer -->
<footer class="site-footer">

  <div class="container">
  
  <!-- One row with the 4 columns --> 
    <div class="row">
        
      <div class="col-xs-12 col-md-3 px-2">
        <!-- "About" content --> 
        <h6>About</h6>
    <p class="text-justify">Paragraph about us.</p>
      </div>

      <div class="col-xs-6 col-md-3 px-2"> 
      <!-- "Hot Offers" content --> 
      <h6>Hot Offers</h6>
    <ul class="footer-links">
          <li><a href="#"> Offer 1 </a></li>
          <li><a href="#"> Offer 2 </a></li>
          <li><a href="#"> Offer 3 </a></li>
        </ul>
      </div>

      <div class="col-xs-6 col-md-3 px-2">
      <h6>Quick Links</h6>
    <ul class="footer-links">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Refund Policy</a></li>
          <li><a href="#">Sitemap</a></li>
        </ul>
      </div>
      
      <div class="col-xs-6 col-md-3 px-2">
      <h6>Social profiles</h6>
     <ul class="social-icons">
          <li><a class="facebook" href="#"><i class="fa fa-facebook"></i>FB</a></li>
          <li><a class="twitter" href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
          <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i>LinkedIn</a></li>
        </ul>
      </div>
    </div>
    <hr>
    
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
        <p class="copyright-text">Copyright &copy; 2021 All Rights Reserved by
          <a href="#">-</a>.
        </p>
      </div>
    </div>
  </div>
 
</footer>

Regarding the text appearing bold or other styling issues when using Bootstrap, try importing only bootstrap-grid.css or bootstrap-grid.min.css which include the grid system and flex utilities without additional styling for elements.

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

variable size with the FitText extension

On my website, I am encountering an issue with the FitText plugin not working properly. The width of a div that I have created using jQuery is causing the problem. Here is the jQuery code: $('.myContent').css({ position: 'relative', fl ...

jquerycssjquery-pluginsfontsresize

"Enhancing Your Web Design with Ruby On Rails: Optimal Methods for Integrating CSS

I am a newcomer to Ruby on Rails and I am seeking advice on the best method to incorporate CSS/JS libraries for a specific controller and method in order to avoid unnecessary requests. Currently, I am using the following somewhat inefficient method: - # ...

javascriptcssruby-on-railsassets

Adjusting the spacing between rows in Bootstrap 5

Having trouble with the spacing in my latest markup update. Here's what I have: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-la ...

htmlcsstwitter-bootstrapbootstrap-5

Adjust the navigation bar for smaller screens

I am diving into my first project using Bootstrap and am currently in the process of setting up the navbar. My goal: When the XS model is activated, I want to adjust the font size of the header, modify the height of the navbar, and left-align the header. ...

htmlcsstwitter-bootstrapresponsive-designnav

SQL AJAX-driven cascading dropdown menu

I have a database consisting of 5 tables, each representing a subcategory of the previous one: countries states cities ZIPcode streets Currently, I have 3 dropdowns that are interdependent. For example, selecting countries: USA will show only the states ...

javascriptphphtmlsqlajax

Navigate to the specified location using AJAX

When I update a comment using AJAX, I want to automatically scroll down to the updated comment: $("#aggiorna").click(function(){ var value = $("#id").val(); var dato = $("#comment_edit").val(); var dato1 = $("#user_id").val(); var dato2 = ...

javascriptjqueryhtmlajax

Confirming file type input is correct

Is there a way to check if the user has chosen an image when clicking the upload button using jQuery? Can I also set restrictions on the resolution of the uploaded image, for example allowing only images with a resolution above 900 x 400? Below is the form ...

jqueryhtml

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

On my website, I have a navigation bar that changes the contents of a div when a user clicks on an item. However, if the user clicks multiple times in quick succession, the content changes too many times. I want to ensure that the content only changes once ...

javascriptjqueryhtmlcss

Binding data to an MVC grid component

I am working with asp.net mvc3.0 razor framework and using an html Table to populate data from ViewBag based on the selected option in a dropdownlist. public ActionResult Index(GetFileName fn) { .... ViewBag.Grid1Data = dt; return View(); } Initially, th ...

javascriptasp.nethtmlasp.net-mvc-3

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

javascripthtmlcss

Ways to swap out unique symbols for HTML elements

I'm currently facing a challenge where I need to locate all strings between two specific characters and then replace those characters with HTML tags. For example, $str = "dog *cat* ping goat *pizza* cow rabbit*"; I would like a function tha ...

phphtml

Changing a form into a static display format

Currently, I am working on designing a profile page layout. During the editing process of their profiles, I aim to showcase a form similar to the one provided in the Bootstrap library: https://getbootstrap.com/docs/4.4/components/forms/#form-row. Once use ...

htmlcssbootstrap-4

Vue component retrieval on the client side

I am attempting to retrieve a component using Vue with cdn in order to dynamically re-render from a public project that contains a file named cash-sale.vue with the .vue extension. <script> export default { data(){ return { "rows&quo ...

htmlvue.js

Bug allows unauthorized access to password in Bootstrap Password Revealer

Whenever I try to reveal a Bootstrap password using the eye button, my PC freezes. Strangely, an input is automatically added even though there are no codes for it. This auto-increasing input causes my browser to hang and eventually crashes my entire PC. C ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide on intercepting errors and sending the corresponding error message back to the client side using Node.js

Attempting to capture errors after utilizing Node.js to search for data in the database. However, whenever there is an error, the server consistently sends {errormsg: null} to the client side. I anticipate a more detailed explanation within the errormsg ...

htmlnode.js

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Adjust the button's background color once it is clicked

Hello, I have been working on a rating button and I am trying to change the background color of the button after it is clicked. However, my code seems to be ineffective in achieving this goal. <ul> <li><button class="btn& ...

javascripthtml

Safari: Fixed-positioned DIVs staying put after DOM updates

Hey there! I've been experimenting with animating absolutely positioned DIVs on my webpage using some JavaScript to update the top and left CSS properties. It's been working smoothly in Chrome, Firefox, and even Internet Explorer 8. However, I e ...

javascriptjquerycssdomsafari

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Navigational strip within the grid

My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...

cssag-grid