CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-grid
Osama Amr
Osama Amr

Reputation: 149

Bootstrap Responsive Grid System

I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and col-md-8 to the text, how to hide the col-md-4 section on the small screen and let the col-md-8 cover the whole section? iam using bootstrap 5

the code:

<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="header-main row">
  <div class="col-md-4"></div>
  <div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
    <h1 class="first-font">MOBI TECH</h1>
    <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
    <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
  </div>
</div>

the output on desktop:

Desktop View

the output on phones:

Phone View

Upvotes: 1

Views: 236

Answers (1)

Antoniossss
Antoniossss

Reputation: 32550

To hide element on particluar screen breakpoint use .d-sm-none .d-md-block

<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="header-main row">
  <div class="col-md-4 .d-sm-none .d-md-block"></div>
  <div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
    <h1 class="first-font">MOBI TECH</h1>
    <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
    <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
  </div>
</div>

this will leave layout as you defined for md screens and hide firs div and make second div 12 cols wide on sm screens.

Upvotes: 2

Related Questions