Using the Flex display property automatically adjusts the height of a button based on its

I have a main container, and within it, an <h1> heading and a <button>. I align them using justify content-between. Since the main container has a d-flex class, the button ends up having the same height as the main container.

Is there a way to fix this issue? I simply need to add some padding to the button.

They have minimal CSS styling, mainly just color and background color properties.

https://i.sstatic.net/0LW5Y.png

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>
htmlcssbootstrap-4flexbox

Answer №1

To prevent the stretch effect, make sure to include align-self-start on the span.

.velemeny_btn {
  background: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn align-self-start"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

Answer №2

Utilize the bootstrap class: align-items-baseline for achieving horizontal alignment

<div class="row">
   <div class="col-12 d-flex justify-content-between align-items-baseline">
      <h1 class="page_title mb-4">Opinions</h1>
      <button class="btn btn-primary">Test</button>
   </div>
  <div class="col">
     <div class="content"></div>
  </div>
</div>

For more information on Flexbox, visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to calculate the sum of for-loop values in a Django template

Inside my Django template, I have a code snippet that looks like this: {% load mathfilters %} {% with total=0 %} {% for item in numbers %} {{ total | addition:item }} {% endfor %} {% endwith %} At the conclusion of this code, the total value remain ...

pythonhtmldjango

What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

I have successfully changed the border styling of the top bar in the table, however, I am struggling to change the background color no matter what I try. Can someone point out where I might be making a mistake? Here is my code: <table> <thead> ...

htmlcss

The Bootstrap navbar toggle is unresponsive and will not expand

I want to implement a Bootstrap navbar to expand the webpage when it is opened on a mobile phone. Below is the code snippet of how I have used Bootstrap in my HTML file: <html> <head> <link rel="stylesheet" href="https://cdn.jsdeliv ...

htmlcssbootstrap-4

Choose a random cell in Jquery every second

I am searching for a method to choose one div out of sixteen and change its CSS backgrounds. This selection needs to occur every second, so a new div is selected from the group each second. I am struggling with implementing the "every second" functionalit ...

javascriptjqueryhtml

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

javascriptcssasp.net

The functionality of the controller is not functioning properly in AngularJS

The button syntax is <div class="btn-group" align="center"> <button ng-click="myFunction()" id="one" class='btn btn-primary btn1' >Save Entry</button> <button ng-click="close_window()" id="two" class='btn btn-pr ...

javascriptangularjshtml

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

I'm attempting to use JavaScript to pull JSON data from a REST API and display it on a webpage. The REST call is functioning correctly in the Firefox console. function gethosts() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://10 ...

javascripthtmljsonajaxrest

Using Bootstrap columns within a PHP loop

I've been researching various solutions for this issue, but none of them seem to be working with my current code. Right now, my products are being displayed in a single column, but I would like them to be shown in a 3 or 4 column grid layout instead. ...

phpbootstrap-4

"Manipulating DOM Elements: Create and Delete Cloned Divs with

I successfully cloned a dropdown with a unique ID on my website. Now, I'm struggling to implement a "x" button that will remove the added clones. Here is the javascript code I'm using: var counter = 1; function addInput(divName, template){ ...

javascripthtml

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

csstwitter-bootstraptwitter-bootstrap-3

Displaying content in a full-width container text box using Bootstrap

Is there a way to ensure that my code utilizes the full width of the device while using bootstrap? <section class="special-area bg-white section_padding_100" id="about"> <div class="container"> <div class=" ...

htmlcssbootstrap-4

Maintaining consistent text spacing within a div, regardless of its minimum height: a javascript solution

I'm developing a JavaScript feature for creating status posts on a webpage. Within the "compose a post" div, there is centered text that reads "enter your text here" (using contenteditable). The issue I am facing is that when a new line is entered in ...

javascriptjqueryhtmlcss

PHP code that prevents undefined index when uploading photos. Ensure photos are successfully inserted into an SQL

Currently, I am dealing with a registration form that includes an option for users to upload a photo for their profile picture. Everything works smoothly when trying to submit the form except for the errors related to the picture index. I strongly believe ...

phphtmlsqlimage-uploading

Guide to centering images with HTML and CSS

I've recently created a website with a homepage design that I'd like to tweak. Currently, the layout looks like this : https://i.stack.imgur.com/5UeUn.jpg My goal is to reposition the ficstore logo to the center and divide the bar into two halv ...

htmlcsstwitter-bootstrap

Remove the class from all child elements and apply the class to the parent or ancestor of the element that was clicked on using

The Goal: I aim to achieve the following outcome. Whenever a user clicks on any of the radio inputs within the div that has the class corp-struct, I want to assign the following class to the parent element two levels up. This means that, in the example bel ...

javascriptjqueryhtmlcss

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

Stop the window from scrolling downwards

My website has a full-width slider as the main background and I am using jQuery to show or hide divs depending on the clicked link. However, when some sections are longer than the initial view, my page automatically scrolls to the bottom after a click. How ...

javascriptjqueryhtmlcsstwitter-bootstrap

Safari displaying incorrect sizing for table nested in inline-flex container

When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display fo ...

htmlcssflexboxsafari

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

htmlcss