Bootstrap from 2 columns to 1 from tablet breakpoint and down

HTML & CSS
1

I have a two column layout. I would like that to become a 1 column layout from tablets and down. In order to make that work I have the following html:

<div class="main-content">
    <div class="container">
        <div class="card-deck d-flex">
            <div class="card col-md-12 col-lg-8 content">
				<p>Test</p>
            </div> 
			<div class="card col-md-12 col-lg-4 sidebar">
				<p>Test</p>
            </div>                           
        </div>
    </div>	
</div>

But using this column combination, the 1 column layout is acivated way below the breakpoint for tablets. What is the right column mix. I tried different col-* combinations but nothing seems to work

2

and… how are we defining a global breakpoint for ‘tablets’? A chromebook pixel with 850px? a Nexus 7 with 960? how about a Galaxy Tab 10 with 1280? Or do you mean an iPad Pro (1360)?

3

@m_hutley Thanks for the responce. Maybe my explanation was not complete enough. I would like it to become one column when the viewport is below 1024px (992px is ok as well) That’s why I used the above col-* mix

4

So bootstrap’s “tablet” classes use the “sm” sizing. Instead of using md (Desktop) and lg (literally “Larger Desktop”), try playing around with the sm ones.

5

@m_hutley I changed the md and lg sizing to sm and md as you suggested

<div class="card col-sm-12 col-md-8 content">

and the same for the sidebar. But according to this site It becomes one column at 572px

By the way meta viewport is in place

6

Aren’t card-decks for equal width items?

It looks as though you should be using a rows and columns.

e.g.

<div class="main-content">
    <div class="container">
        <div class="row d-flex">
            <div class="card  col-lg-8 content">
				<p>Test</p>
            </div> 
			<div class="card col-lg-4 sidebar">
				<p>Sidebar</p>
            </div>                           
        </div>
    </div>	
</div>

Working example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.mycard .card{
	background:#f9f9f9;
	flex:1 0 auto;
	padding:10px;
}
.mycard .content,
.mycard .sidebar{
	display:flex;
	flex-direction:column;
}

.sidebar .card{background:#ccc;}
.card:hover {min-height:500px;}/* for testing*/
</style>
</head>

<body>
<div class="main-content">
  <div class="container">
    <div class="row d-flex mycard">
      <div class="col-lg-8 content">
        <div class="card">
          <p>Test</p>
          <p>Test</p>
          <p>Test</p>
        </div>
      </div>
      <div class="col-lg-4 sidebar">
        <div class="card">
          <p>Sidebar</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
7

You are absolutely right. I used the card deck to create space between the columns. By using a combination of card and card * within the card deck, I achieved the desired result at first glance. Only now it appears that problems arise with the breakpoints. I could have used a push / pull combination for this as well, but that gave just enough space between the columns.

Great example Paul. This is exactly where I was’after. Thanks for thinking along

9

I put another col in between two columns when I want to create space, and just set their display to none when I no longer need them in certain breakpoints.

Remove the class col-sm-12 and replace it with col-12 instead. I think you won’t need the class card-deck and card with that.

10

You should avoid where possible adding extra elements just to achieve a certain layout because usually it is the wrong approach. Wherever possible your html should be semantic. Only add empty html when you have no other choice. Of course there are times when it may be unavoidable but I don’t see a need to do that here.:slight_smile:

1 Like
11

I see. I’ll keep this in mind.

The person who taught me HTML and CSS does this, and I sort of adopted the way he does things. Thanks for pointing this out.

12

Yes its best to avoid unnecessary elements if possible it but there are times when you just have to do it :slight_smile:

1 Like
13

That was my initinal approach as well, but Like @PaulOB allready suggested always try to avoid extra elements.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.