'How to adjust margin for small screens in Bootstrap 4?

I am trying different things to adjust the margin left for mobile (different)screen size. I am setting margin according to medium screen size using margin-left. And want to adjust for small screen size. Generally which method is useful and papular. Nothing is working in my case.What is wrong?

Can someone explain it with example. I am able to adjust screen size for column grid. But heading and header and footer is the issue. If I give heading and make it horizontal-align using margin left. How to change it for different size screen? What is wrong?

1)Do I need to add different style tags for each of them(mobile and medium size using media query. It is not working.) 


2)I trying to add class visible-xs and add mobile-margin (h1 view on mobile)

3)Add bootstrap utility class (h1 Utility class) 



<script>
<!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awsome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<!-- font awsome -->
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    
</script>

<style>
  .read{
        width:300px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 50px;
        padding-top: 8px;
       margin-left: 400px;
        margin-top: 100px;
    }
    
.learn{
        width:300px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 50px;
        padding-top: 8px;
      /* margin-left: 400px;*/
      /*  margin-top: 300px;*/
    }
    .mobile{
        width:400px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 100px;
    } 
.mobile-margin{
        margin-left: 50px;;
    }    

@media only screen and (min-width : 320px) {
margin-left: 50px;
}

@media only screen and (min-width : 768px) {
margin-left: 400px;
}
</style>




<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="read">Read more</h1>
        </div>
    </div>
    </div>  
    
    
    <div class="container">
    <div class="row">
        <div class="col-md-12 ml-md-4 ml-sm-1">
            <h1 class="learn">Utility Class</h1>
        </div>
    </div>
    </div>  
    
    
   <div class="container">
    <div class="row">
        <div class="mobile-margin visible-xs">
            <h1 class="mobile">view on mobile</h1>
        </div>
    </div>
    </div>  
</body>
htmlcssbootstrap-4


Solution 1:[1]

You can try Bootstrap classes to adjust according to the screen sizes. First set a default (mobile) and then change using md or lg:

<div class="row">
    <div class="col-md-3 ml-0 ml-lg-5">Margin Test</div>
    <div class="col-md-3 ml-0 ml-lg-3">Margin Test</div>
</div>

margin-left is set to 0 for mobile screens and margin-left is set to 5 for large screens

Solution 2:[2]

I give you an example of a heading H1 element.

First make sure to add bootstrap css link correctly to your page.

In bootstrap you can use the m class for margin and the p class for padding. In addition you can optionally set the side on which you want to apply margin or padding. Use ml for example to set margin left. You can give it a value between 0 and 5. For example, ml-3. You can also specify multiple values for multiple screen sizes as shown in the below example:

<h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>

In this example, the heading element will have a margin of 5, it will change to 3 when screen size reaches medium and it will change to 0 when screen size reaches large.

Solution 3:[3]

All you have to do is give the class name in the media screens.You haven't given your class name and just given margin-left

@media only screen and (min-width : 768px) {
margin-left: 400px;
}

You can specify the name like this

 @media only screen and (min-width: 320px) {
        .read {
          margin-left: 50px;
        }
      }

      @media only screen and (min-width: 768px) {
        .read {
          margin-left: 400px;
        }
      }

You can center the heading through

<h4 class="text-center">
<h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4>
<h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4>
<h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4>

and for buttons centering

<div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DᴀʀᴛʜVᴀᴅᴇʀ
Solution 2 EddyG
Solution 3

Related Questions