``When the screen size is reduced, the Bootstrap columns will resize and appear next to

Struggling to create a responsive web design similar to: https://i.sstatic.net/scRyw.png

When resizing, I want the skills section to appear side by side under the introduction: https://i.sstatic.net/SLzsx.png

The issue lies with the layout of the introduction and skills boxes; I can't seem to get them to adjust properly as desired: https://jsfiddle.net/aq9Laaew/20858/

HTML:

<div class="container">
  <div class="row">
    <div class="col text-center">HEADER</div>     
  </div>
  <div class="row">
    <div class="col">
      INTRODUCTION
    </div>
    <div class="col p-0">
      <div class="col m-0">SKILLS</div>
      <div class="col m-0">SKILLS</div>
      <div class="col m-0">SKILLS</div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

CSS:

.row {
  background: #f8f9fa;
  margin:10px;
}

.col {
  border: solid 1px #6c757d;
  margin: 10px;
}

.row, .col {
   min-width: 120px;
}

Currently, they stack one below the other, which should only happen on an extrasmall screen. It seems straightforward, but I just can't crack it...

I attempted using col-4 for the introduction (as it needs to be wider than the skills), and played around with the columns in the skills box with no success.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Below are a few key points to consider in order to achieve the desired layout:

  • cols should be nested within row elements, and skills should be contained within their own row.
  • Utilize col-sm for vertical stacking of columns on smaller screens.
  • Avoid adjusting margins on rows or cols as it can disrupt the grid layout.

To see a live example, check out this demo: 

<div class="container">
  <div class="row">
    <div class="col p-0 text-center">HEAD</div>     
  </div>
  <div class="row">
    <div class="col-sm p-0">
      INTRO
    </div>
    <div class="col-md-auto p-0">
        <div class="row no-gutters">
          <div class="col col-sm col-md-12">SKILLS</div>
          <div class="col col-sm col-md-12">SKILLS</div>
          <div class="col col-sm col-md-12">SKILLS</div>
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col p-0">
      ED
    </div>
    <div class="col p-0">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col p-0">OTHER</div>
  </div>
</div>

CSS: 

.row {
  background: #f8f9fa;
}

.col,.col-sm {
  border: solid 1px #6c757d;
}

Answer №2

When splitting content into multiple columns, remember to enclose them in a row div (to utilize display:flex).

Also, don't forget to assign classes to your columns based on the desired appearance on various screen sizes. In Bootstrap 4, use col plain and then customize for larger screens.

In this instance:

col-lg-8 and col-12 are used for the INTRO section.

col-lg-4 and col-12 for the wrapper of the Skills column.

col-lg-12 and col-4 for the individual Skills columns.

Additionally, include a row to contain the Skills columns.

Refer to the following code snippet or visit jsFIddle for more details:

.row {
  background: #f8f9fa;
  margin: 10px;
}

[class*="col-"] {
  border: solid 1px #6c757d;
}

.row,
[class*="col-"] {
  min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-12">
      INTRO
    </div>
    <div class="col-lg-4 col-12 p-0">
      <div class="row mx-0">


        <div class="col-lg-12 col-4 m-0">SKILLS</div>
        <div class="col-lg-12 col-4 m-0">SKILLS</div>
        <div class="col-lg-12 col-4 m-0">SKILLS</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div>
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

Answer №3

  • To achieve the desired layout, encase the skill boxes within a div and assign it the classes d-flex flex-wrap
  • By following this method, you can avoid using negative margins
  • Adding the col-md-8 col-sm-12 classes to the intro div will ensure its width is 100% on smaller devices
  • No modifications to the css are necessary

.row {
  background: #f8f9fa;
  margin:10px;
}

.col {
  border: solid 1px #6c757d;
  margin: 10px;
}

.row, .col {
   min-width: 120px;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>     
  </div>
  
  <!-- Changes here -->
  <div class="row">
      <div class="col-md-8 col-sm-12">
        INTRO
      </div>
      <div class="col p-0">
        <div class="d-flex flex-wrap">
          <div class="col-4 col-md-12 m-0">SKILLS</div>
          <div class="col-4 col-md-12 m-0">SKILLS</div>
          <div class="col-4 col-md-12 m-0">SKILLS</div>
        </div>
      </div>
    </div>
   <!-- Changes Ends here --> 
  
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

Answer №4

To tackle this issue, I recommend utilizing a media query. Here is a helpful resource on CSS3 media queries

The solution involves maintaining your current layout as is, and then adjusting it as needed within the media query to achieve the desired appearance when the screen size changes.

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

Automated logout feature will be enabled if no user interaction is detected, prompting a notification dialog box

Here is my working script that I found on this site. After a period of idle time, an alert message will pop up and direct the user to a specific page. However, instead of just the alert message, I would like to implement a dialog box where the user can ch ...

javascriptphpjqueryhtml

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

htmlcssbootstrap-4

Styling with CSS and using templates

Just had a quick question about CSS and a template I'm working with. Currently, I have these two fields in my CSS: .content { padding:10px; width: 100% text-align:justify; font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif; } ...

ruby-on-railscss

Unusual data entries within Datalist Input 'Gas' and 'gas'

When setting the name or id of an Input with a list like 'cia', two strange selectable values appear at the bottom: Gas and gas. Any thoughts on why this might be happening? <input list="browsers" id="cia"> <datalist id="browsers"> & ...

htmlinputdatalist

Remove the right margin on the bootstrap container

I am currently working on creating dashboards using the Python library called Dash, and I have encountered an issue with Bootstrap components. Specifically, I am unable to remove the right margin from the container. I have tried using class_name='m-0& ...

pythoncsstwitter-bootstrapplotly-dashbootstrap-5

Adjusting the Aspect Ratio of an Embedded YouTube Video

<!DOCTYPE HTML> <head> <style> body { overflow: hidden; margin:0; } </style> </head> <body> <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&sh ...

javascriptjqueryhtmlcssyoutube

Is it a good practice to whitelist inputs for preg_replace()?

How can whitelisting be implemented for input fields to prevent HTML and XSS injection? It seems like using preg_replace with regular expressions is a good initial step. Are there any other methods worth exploring? ...

phphtmlinputxsswhitelist

Presenting information on an HTML webpage using the slidetoogle feature

< script > $(document).ready(function() { $("#flip").click(function() { $("#panel").slideToggle("fast"); }); }); < /script> When a button in a particular panel is clicked, I aim to display the details of that specific tuple ...

javascriptphpjqueryhtml

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

Tips on displaying hyperlinks within a text area in an Angular application

In my Angular application, I am facing an issue with displaying hyperlinks within a text area box for dynamic content. The hyperlinks are not recognized and therefore cannot be clicked. Can someone please advise on how to properly display hyperlinks with ...

javascripthtmlcssangulartypescript

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

htmlangulartypescriptangular-material

`Turn nested JSON into a formatted list using jquery`

I am currently facing two challenges: I am having trouble with the HTML structure, as shown in the image below Current HTML structure: https://i.stack.imgur.com/GH46J.png Desired HTML structure: https://i.stack.imgur.com/Dq3Gn.png How can I create d ...

javascriptjqueryhtmlcssjson

Utilize JavaScript to trigger a gentle notification window to appear on the screen

Whenever I click a link on my HTML page, I want a popup element (just a div box) to appear above the clicked link. I have been using JavaScript for this, but I am facing an issue where the popup element appears below the link instead of above it. Can you ...

javascripthtmlcss

Trouble arises when attempting to append a class through ng-class upon clicking

In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...

javascriptcssangularjs

Use jQuery to easily update the background of an iFrame

I have implemented this code to store the background image selected from a dropdown menu labeled rds. This function also sets a cookie so that the chosen background persists even after the page is reloaded. The issue lies in the line containing $('da ...

javascriptjqueryhtml

Responsive Navigation Bar with Bootstrap

Struggling with the Bootstrap 4 navbar issue, specifically trying to close it when the <a> within the <li> tag is clicked. Experimented with data-toggle="collapse" data-target=".navbar-collapse.show" inside the <a> tag and it worked, but ...

jquerybootstrap-4

Conceal the element at all times

I'm facing a challenge with a paragraph element that is dynamically filled with content using Javascript. I need to hide the element whenever it doesn't have any text within it. However, I want to avoid using setTimeout or setInterval for this ta ...

javascriptjquerycsshtml

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

javascriptjqueryhtmlajaxjsp

Using Angular2 and ng-bootstrap to create a modal template that can be easily reused with various sets

I am in the process of developing an interactive dashboard interface that showcases various entities with comparable data. Each entity is equipped with an edit button, which I want to utilize to trigger a modal displaying the relevant data. My goal is to ...

angularmodal-dialogbootstrap-modalbootstrap-4ng-bootstrap

What are some methods for converting data from data tables into alternative formats?

I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...

jqueryhtml