I am facing issues with setting up the buttons. I'm not sure whether a grid system is needed for this task or not. I want the design to resemble the following example:
I haven't written any code yet as I am unsure about where and how to begin.
If anyone can offer assistance, thank you in advance!
To achieve the desired layout, you can utilize flexbox properties such as justify-content and align-items. See the example code 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>Utilizing a grid layout could be a great fit for your design, but it's not the only option to achieve the desired result. CSS flexbox display (display:flex) or even display: block could also work well and suit your requirements.
If your web layout primarily consists of rows or columns, then Flexbox is the ideal choice. However, if you're dealing with a more complex layout involving multiple rows and columns, CSS Grid would be more suitable.
For more detailed information, check out:
Here's a simple configuration to consider for your design using flexbox:
Let's say your first component (logo and user profile) is contained within one div. You can utilize
display:flex and flex-direction: rowjustify-content: space-between to span the entire row.
Next, if you have 4 buttons, you can create another div with flex-direction set to column. Adjust the width of the div and buttons as needed.
The structure of the last div will be similar to the first one.
You can define different widths or heights for each div.
Hey everyone! So I had a question a few days back that I couldn't find the answer to: why was the content appearing weird and not formatted correctly when I used jQuery's .load() function to load another .HTML page from my directory? The strange ...
I have a vision for a unique and creative logo solution that involves incorporating a magnifier glass effect. When a user hovers over a certain area of the logo, I want it to zoom in with a magnifier glass effect. I haven't been able to find much info ...
Currently, I am in the process of developing a Phonegap (HTML5) app that needs to communicate with a Websocket server on an embedded device within my home network. The server also runs a Bonjour service. I'm seeking advice on the most efficient metho ...
Seeking advice on JS / CSS / HTML programming! I may not be the best at articulating my question, so I apologize for any confusion. Let me clarify my intention behind this specific code section and explore potential solutions. The goal is to allow users ...
Can I utilize curly braces in the style section of vue.js to set a value? For instance .container { background: url({{ image-url }}; color: {{ color-1 }} } ...
Currently utilizing Bootstrap 4.0 Beta for website design, encountering a roadblock with a responsive-utility feature. In previous Bootstrap 3 versions, it was achieved using classes like: hidden-xs, hidden-md, among others. The addition of -up and -down ...
Web Development <li ng-show="sample($event)" TestLi</li> JavaScript Functionality $scope.sample = function($event){ //$event is undefined //perform some action } I have experimented with passing the HTML element using ng-click, but I am curio ...
My current template, based on Bootstrap, displays a text along with a button and an image. Using a checkbox, you can choose whether the image appears to the right or left of the text. One issue I'm facing is that in the mobile view, the text and butt ...
Whenever I attempt to display a modal using Bootstrap, it mysteriously appears upon page refresh but fails to show up when the button is clicked. Ideally, I want the modal to only appear when the user clicks on the button. The structure of my html file lo ...
In my ASP.NET project, I have created a website where users can add articles to a table displaying different products. The website contains tables showing warehouse items and materials needed for product manufacturing. Users can select a product from a dr ...
Within my code snippet below, I am aiming to modify the initial value using a slider. The slider appears to be functioning correctly; however, it is not updating the values of timeout as indicated beneath the line $('ul.<?php echo $this->session ...
Visit the Satoshi Faucet Index here I'm attempting to vertically align the text within the four divs containing sat, bit, mBTC, and BTC. I have tried using display:table-cell; vertical-align:middle; on the divs but unfortunately it isn't havi ...
Reflecting on the passage below: So in the initial group, we merge these 3 codes: - AA - BB - CC with the following codes: - Aa - Ab - Ac to achieve the desired outcome. Is this paragraph semantically incorrect? If not, how should it be written in H ...
I need assistance with validating dynamically created textareas. In the code below, I am able to validate only the first row but struggling to do so for the second row. How can I get all the row values validated? Thank you in advance. To generate dynamic ...
Two Bootstrap 4 carousel components are currently running. The markup for both instances is essentially the same, but their displays are completely different: one has button states that display as .5 opaque, hard-bordered rectangles with the "chevron" butt ...
<ThemeProvider theme={theme}> <GlobalStyle /> {componentName !== 'questionaire' && componentName !== 'activityResult' && <CardWrapper />} <ErrorModal ...
This is the main component: import React from 'react'; import ChildModal from 'ChildModal'; const MainComponent = () => ( <div> <span>Click </span> <a>HERE TO OPEN MODAL</a> <div> ); ...
When trying to trigger a jquery action on an element, an error occurred. Upon checking the console, it displayed an error message: https://i.sstatic.net/5DZSJ.png Interestingly, the code causing the error is not present in my js file at all. Here is a s ...
Are there alternative methods for customizing an expanded select list using HTML or a jQuery plugin? I am interested in rendering each option in the list with multiple styles, similar to this example where the number is displayed in red: <select size=" ...
I've recently integrated fancybox 2 into my project and have encountered an issue when appending HTML content to the modal. I disabled scrolling, but now any overflowing content is being hidden. Could this be related to the max-height of the modal? Ho ...