Problems with buttons / grid in HTML/CSS

Issue

i have problems with the setup of the buttons. I’m unsure if i need a grid system or not?
I want it to look like this example:

example of how i want it

No code yet as i am unsure of where to start, and what to start with.

If somebody can help then hanks in advanced!

Solution

You can use with flex, justify-content, align-items like example below:

.wrapped {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 500px;
}

.avatar {
 width: 50px;
 height: auto;
}

button {
 width: 200px;
}

.div1 {
 display: flex;
 justify-content: center;
 padding: 10px;
}

.div2 {
 display: flex;
 flex-direction: column;
 padding: 10px;
}

.div2 button{
 width: 200px;
 margin: 6px;
 padding: 5px;
}

.div3 {
 display: flex;
 padding: 10px;
 margin-left: 0px;
 align-items: center;
}

.div3 button {
 width: 40px;
 height: 30px;
 margin-left: 160px;
}

.bell {
 width: 30px;
 padding: 10px;
 flex-basis: 1000px;
}
<section class="wrapped">
 <div class="div1">
  <button>At campus</button>
  <img class="avatar" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&m=1300845620&s=612x612&w=0&h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" />
 </div>
 <div class="div2">
  <button>Q & A</button>
  <button>Klasser</button>
  <button>Grupper</button>
  <button>Chat</button>
 </div>
 <div class="div3">
  <img class="bell" src="https://www.iconpacks.net/icons/1/free-bell-icon-860-thumb.png"/>
  <button>Help</button>
 </div>
 
</section>

Answered By – VMT

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.