align the button to the left using bootsrap configuration

Is there a way to align a button to the left using bootswatch/Litera, which is a bootstrap 4 beta theme?

I attempted to use the float-left class on the button and place it inside a div, but the outcome remained the same.

https://i.sstatic.net/qs4zU.png

I placed the button in the modal footer.

<div class="modal-footer">
    <div class="float-left">
        <button type="button" class="btn btn-outline-primary btn-circle float-left">
            <i class="fa fa-plus"></i>
        </button>
    </div>
    <button type="button" class="btn btn-primary">Save</button>
</div>
cssalignmentbootstrap-modalbootstrap-4

Answer №1

<div class="modal-footer">
<div class="pull-left">
    <button type="button" class="btn btn-outline-primary btn-circle pull-left">
        <i class="fa fa-plus"></i>
    </button>
</div>
<button type="button" class="btn btn-primary">Save</button>

Instead of using "float-left" class, you can use "pull-left"

Answer №2

Here is a CSS snippet to align the button to the left side within a modal. You can test this by clicking on the demo modal button.

#myModal .modal-footer {  
 justify-content: space-between;  
}


#myModal .modal-footer {  
  justify-content: space-between;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">      
          <button type="button" class="btn btn-outline-primary btn-circle">
              <i class="fa fa-plus"></i>
          </button>
          <button type="button" class="btn btn-primary">Save</button>
     </div>
    </div>
  </div>
</div>

Answer №3

Check Out This Code Snippet:

.modal-footer > .float-left {
    width: 100%;
}


.modal-footer>.float-left {
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="modal-footer">
    <div class="float-left">
        <button type="button" class="btn btn-outline-primary btn-circle float-left">
            <i class="fa fa-plus"></i>
        </button>
    </div>
    <button type="button" class="btn btn-primary">Save</button>
</div>

Answer №4

When it comes to styling with CSS, simplicity is key.

.modal-footer { 
        display: block;
        -webkit-box-pack: inherit;
        -webkit-justify-content: inherit;
        -ms-flex-pack: inherit;
        justify-content: inherit;
    }
    .btn-save  {
        align-self: right;
    }

Here is an example of how you can implement this in your HTML:

 <div class="modal-footer">
    <div class="plus-button">
         <button type="button" class="btn btn-outline-primary btn-circle float-left">
            <i class="fa fa-plus"></i>
         </button>
    </div>
    <button type="button" class="btn btn-primary float-right">Save</button>
 </div>

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

Safari alters the header color on mobile devices

Debugging this issue has been quite challenging - the number at the top of the page appears in white before changing to a dark grey on iPad and iPhones running Safari. Why is this happening?! It functions correctly on all other devices! Check out www.col ...

csssafariheader

Showing a collection of cards within a dynamic container set up in a 3x3 grid layout to start

In an attempt to showcase cards within a responsive container utilizing bootstrap and django, my goal is to create a 3x3 grid layout on extra-large screens with scrollable overflow that adjusts based on device width. Initially, I experimented with wrapping ...

javascripthtmlcssdjangobootstrap-4

There appears to be an issue with the onmousemove function

I am currently troubleshooting an issue with a script that I wrote for my button. Interestingly, the code works flawlessly when I test it on CodePen, but I encountered an error when I attempted to run it in VSCode. Even after trying to recreate the script ...

javascripthtmlcss

Issues arising from the visibility and concealment of elements using bootstrap

Struggling with hiding certain content in my code. I'm fairly new to coding, having just started about a week ago. So far, I've learned HTML, CSS (which I find the most important), and how to utilize Bootstrap 4. My issue lies in wanting to hide ...

htmlcsstwitter-bootstrapbootstrap-4

How do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

htmlcss

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...

htmlcssrshiny

What is the best way to ensure that less2css compiles all files after saving just one less file?

In my project, I have a style.less file that imports "page.less". Whenever there is a change made to page.less, I find myself having to go back to the style.less file and save it in order for less2css to compile and apply the changes. If not, the changes ...

csscompilationlesssublimetext2

When you add the measurements of two images to the top bar, you get the viewport size

Requirement 1: A top bar measuring 46px in height Reqirement 2: One photo positioned at the top and another at the bottom I have attempted the techniques mentioned on How to resize an image to fit in the browser window?. However, the images still appear ...

htmlcss

Hover delay effect using Tailwind CSS

I'm facing an issue where text appears when someone hovers over a group, causing a dizzy feeling due to auto formatting during resize. I'd like to delay the text from showing up until the resize is complete. Is there a way to achieve this without ...

htmlcsstailwind-css

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...

javascriptjqueryhtmlcss

Mobile video created with Adobe Animate

Currently, I am designing an HTML5 banner in Adobe Animate that includes a video element. However, due to restrictions on iPhone and iPad devices, the video cannot autoplay. As a workaround, I would like to display a static image instead. Can anyone provid ...

javascriptcsshtmljquery-animateanimate-cc

Steps to apply the nav-active class to a navigation using jQuery just once

Seeking assistance with a problem I am facing. I would like to add the nav-active class to an li element only once, meaning if a child element is selected, then the parent li should not have the nav-active class. Below is the code I am using, but it does n ...

javascriptjqueryhtmlcss

Angular 8 wild card redirect problem with Routable Modals

I have a Modal that can be routed with unique parameters to display Training content defined in the app-routing.module.ts file { path : 'TopshelfContent/:catName/:cmsID', component: ModalContainerComponent, canActivate: [MsalGuard]}, When manua ...

angularroutesbootstrap-modal

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

javascriptcssmaterial-uidrop-down-menujsx

The setInterval function does not function properly in IE8 when set to 0

I have a function called changeColor that updates the styling of certain elements in my HTML. In order to apply this function, I am using a timer like so: var timer = setInterval(changeColor,0); The issue I am encountering is that setting the time interv ...

javascripthtmlcssinternet-explorer-8

Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

I am struggling to align the brand and dropdown menu on the right with the content of my page. My goal is to have a single column for the content, taking up col-8 on larger devices and col-12 on smaller devices. I want the navbar and footer to always be 10 ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

The first-child and last-child selectors are not working properly in the CSS

In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...

css

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

Possible for jQuery autocomplete to reposition the list?

Is it feasible for me to adjust the position of the dropdown list by moving it down 4 pixels? I've experimented with various styles within .ui-autocomplete {}. These include: margin-top: 4px; top: 4px However, these modifications don't appe ...

jquerycssautocompleteposition

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

cssflutterdartcontainersshadow