CODEWITHSUNDEEP
htmlcssbuttontwitter-bootstrap-3less
Cold_Class
Cold_Class

Reputation: 3484

Responsive bootstrap 3 buttons side by side without line breaks, only show symbol when too small

There are tons of button styling questions out there, but I can not find the one for my case, if you see one please link me to it.

What I want:

I'm using bootstrap 3.
First my buttons look like this:
enter image description here
...and when I make my browser window a bit smaller, like this:
enter image description here

Instead of doing line breaks, I want the buttons to become more narrow.
But since cut-off text would look bad, it should be hidden, only leaving a symbol.
This should also work with 3 buttons, which is currently as mess as well:
enter image description here

Here's my example, the parent has a certain width, which I simulated by setting it to 75%. The problem is, that the buttons are line breaking now. And I also don't know how to make the text disappear on overflow using only less and css.

.fixed-footer {
  width: 75%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-plus"></i> Neues Projekt</button>
    </div>
    <div class="btn-group">
      <a class="btn btn-success" href=""><i class="fa fa-upload"></i> Projekte exportieren</a>
    </div>
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-edit"></i> Bearbeiten</button>
    </div>
  </div>
</div>

Upvotes: 2

Views: 1056

Answers (2)

Tharaka Nilupul Dharmabandu
Tharaka Nilupul Dharmabandu

Reputation: 386

You can add span tag around button text. Here I have added span with class btn__txt

then hide it in small screen using media queries

.fixed-footer {
  width: 75%;
}
 
@media only screen and (max-width: 768px) {
  .btn .btn__txt{
    display:none;
  }  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-plus"></i><span class="btn__txt"> Neues Projekt</span></button>
    </div>
    <div class="btn-group">
      <a class="btn btn-success" href=""><i class="fa fa-upload"></i><span class="btn__txt"> Projekte exportieren</span></a>
    </div>
    <div class="btn-group">
      <button class="btn btn-default"><i class="fa fa-edit"></i> <span class="btn__txt">Bearbeiten</span></button>
    </div>
  </div>
</div>

Upvotes: 1

Gautam Naik
Gautam Naik

Reputation: 9338

Here is my solution

Make the button parent flex-container.

Then give flex:1 to each button, this will make them flexible and also u will be able to add more buttons.

Then using the @media(max-width:400px) rule, hide the text below 400px

Add this to your css

.b-container {
  display: flex;
}

.b-container .btn {
  flex: 1
}

@media(max-width:400px) {
  .b-container .text {
    display: none;
  }
}


.fixed-footer {
  width: 75%;
}

.b-container {
  display: flex;
}

.b-container .btn {
  flex: 1
}

@media(max-width:400px) {
  .b-container .text {
    display: none;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">
  <div class="btn-toolbar b-container">

    <button class="btn btn-default"><i class="fa fa-plus"></i> <span class="text"> Neues Projekt  </span>
    </button>


    <a class="btn btn-success" href=""><i class="fa fa-upload"></i> <span class="text">Projekte exportieren </span>
    </a>


    <button class="btn btn-default"><i class="fa fa-edit"></i><span class="text"> Bearbeiten</span>
    </button>

  </div>
</div>

Upvotes: 1

Related Questions