how to make buttons extend to full width in mobile view while not end pc using bootstrap?

user_17820810 0
Viewed 419

i want to apply text end or push the buttom to end in pc view and make each buttons take whole width and stack upon each other in mobile view for two href buttons inside ! any idea??

    <div class="row flex-between-end ps-0 pe-0">
        <div class="col-md-5">
             <label class="col-form-label text-facebook">@wordInfo["Title"]</label>
         </div>
        <div class="col-md-7 ps-sm-0"> 
         
            <a href="@(ViewData["ROOT_URL"])menu/menuform/@Common.CommonConst.Mode.PUB_C_REGIST/" 
            class="btn btn-outline-primary mb-2  ms-1 float-md-end ">
<span class="fas fa-plus " data- 
            fa-transform="shrink-3"></span> @wordInfo["Regist"]</a>
     
           <a href="@(ViewData["ROOT_URL"])menu/menusublist/" class="btn btn-outline-primary mb-2 
          float-md-end"><span class="fa fa-bars" data-fa-transform="shrink-3"></span> 
          @wordInfo["MenuSubList"]</a>
            </div>

pc view ok

enter image description here

should looks like this in mobile view enter image description here

twitter-bootstrap css html
1 Answers

Add this class mobile to label(Menu list) & a tag(Sub,Reg).

@media (max-width: 800px) {
.mobile {
display: flex;
flex-direction: column;
align-items: center;
}
}

This will make them vertical when screen-width<=800px, change the vaue if you need to.

user_177595460
Related