Steps for aligning all contents in jumbotron at the center using twbs:bootstrap with Meteor

I've been at it for hours experimenting with different methods, but I just can't seem to move these buttons.

Figuring out how to override the CSS and apply margin tricks is proving to be a challenge.

All I really want is for everything within the jumbotron - text and button group alike - to be perfectly centered. 

<template name="Jumbotron">
<div class="jumbotron center">
    <h1>Hello, world!</h1>
    <p>Get Started Now</p>
        <div class="btn-toolbar">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>
</div>
</template>
htmlcsstwitter-bootstrapmeteor

Answer №1

To apply the inline-block display property to the btn-toolbar class, make the following CSS changes.

Check out the code snippets below for an example.

.btn-toolbar.meteor-btn-toolbar,
.btn-toolbar.meteor-btn-toolbar2 {
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
  <h1>Hello, world!</h1>

  <p>Get Started Now</p>
  <div class="btn-toolbar meteor-btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="..."> <a role="button" class="btn btn-primary btn-lg">Learn More</a>
      <a role="button" class="btn btn-primary btn-lg">Learn More</a>

    </div>
  </div>
</div>
<hr>
<div class="jumbotron text-center">
  <h1>Hello, world!</h1>

  <p>Get Started Now</p>
  <div class="btn-toolbar meteor-btn-toolbar2"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

  </div>
</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

Implement a "View All" link to toggle between displaying all items and keeping one item open by default,

I am working on multiple toggles for each letter of the alphabet. To make it easier for users, I want to add a "See All" button that will open any closed toggles. Additionally, I want the toggle for the letter A (div1) to be automatically open when the pag ...

jqueryhtml

What could be causing the disappearance of my <Div> when applying a Class to the contained <span>?

My goal is to showcase a variable on my HTML page using CSS for a Graphical display in OBS streaming software. Whenever I apply the class .wrappers to the span id p1Name (and p2Name), the text disappears from the HTML output in OBS. I'm puzzled as to ...

htmlcss

What causes the slowness of onsubmit=" " function?

Initially, I had the following setup: HTML: <form onsubmit="return validate()"> ... <input type="submit" id="submit-button"/> </form> JS: function validate() { // Extensive validation process with regex and more... $(& ...

javascriptjqueryhtmlvalidation

Issues occurred as the button's on-click function fails to execute the

Just starting out with JavaScript and coding, encountering a problem with an on-click scroll action that should go to another div. I've searched through several posts but still can't figure out why it's not working. Any assistance would be g ...

javascriptjqueryhtml

Encountering numerous challenges while attempting to create a switch theme button with the help of JavaScript's localStorage and CSS variables

It's frustrating that despite all my efforts, I'm still stuck on implementing a small feature for the past 5-6 hours. I need assistance with storing a single variable in the user's localStorage, initially set to 1. When the user clicks a but ...

javascripthtmlcssdomdom-manipulation

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...

javascripthtmlangularjsforms

Having trouble getting the background image to display full screen in ReactJS

Currently, I am venturing into the world of reactjs with an aim to create a seamless user experience by implementing login, register, and home screens through routing. Below is a snippet of my code. import React from 'react'; import { render } f ...

cssreactjs

Distinctive shaped container edge

I am looking to design a unique HTML box that includes a little tip at the bottom. Using HTML and CSS, I have created this specific design shown in the code below. Take a look. .item{ width: 200px; height: 130px; background: gray; background-rep ...

htmlcss

Cleaning up HTML tags from API search results in a React application

Using React to fetch and display search results from the Wikipedia API const resultsList = results.map((result) => { return ( <div key={result.pageid} className="item"> <div className="content"> <div classNa ...

javascripthtmlreactjsapi

Two lines of pictures (an odd amount of images)

I need help creating 2 rows of images with 5 images in total:      Image Image Image Image Image How can I center the first row properly? Currently, my layout looks like this: Image Image Image Imag ...

htmlcsshtml-table

Position dropdowns side by side within a Bootstrap navigation bar

Struggling with utilizing Bootstrap's nav-bar component - I'm attempting to position two dropdowns next to each other on the left side of the viewport. The Bootstrap framework being used is right-to-left (rtl). Here's an example of the navba ...

htmlcssdrop-down-menubootstrap-4nav

Display the content within a div as a background image

I am attempting to design a div that initially displays the text loading..., and then can be covered by new elements as they are loaded into it. Below is the code snippet I am working with: <div class="results" style="position:relative;" *ngIf="showRes ...

htmlcss

Ways to transfer a variable from a Node.js script to a JavaScript file on the client side

Seeking guidance on how to transfer the "myBlogs" variable from my Node.js file ("server.js") to a frontend JavaScript file ("blogs.js"). I intend to utilize this variable in the JS file to iterate through the array it contains, generating a template for e ...

javascripthtmlnode.js

What are some solutions for troubleshooting a responsive image that functions correctly in Firefox but not in Chrome and Safari?

My row contains several img elements with height-capped sizes, displaying properly on Firefox but stretching on Chrome and Safari. Firefox Chrome Safari HTML: <div class="container-fluid text-center" style="padding-top: 15px"> <h6 class="ca ...

htmlcssresponsive-designbootstrap-4

Starting the description text immediately after the title while maintaining equal width for the title can be achieved by carefully

I need some assistance with formatting a title and description in a specific way. The title should be followed by the description starting on the next line while maintaining the same width for the title. It should resemble the image linked below https://i. ...

htmlcss

Switch up the standard blue hue of animations in Hover.css

Is it possible to modify the default blue color of animations in Hover.css an example being the Border Transitions, specifically the Underline From Center effect with an orange hue ...

htmlcsshover

The navigation/hamburger icon vanishes after a click on a page link

I'm in the process of creating a single-page scrolling website. However, I am encountering an issue with the navigation bar. Specifically, when I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), ...

javascripthtmlcss

Creating an image border for various sizes of an HTML div using CSS and JavaScript code

I am in the process of developing an HTML5/Javascript game that will be compatible with modern browsers. The game will feature dialog boxes, or modal popups, which will have borders made up of images such as vertical, horizontal, and corner pieces. These p ...

javascriptcssuser-interface

Arrange a table in HTML based on the item's identification number

I am working with an HTML table that fetches data stored locally. Currently, it searches through the model in a foreach loop and displays the information in two columns (Patient Name & SiteID). However, I want to find a way to organize the information by ...

htmlasp.netrazor

Triggering hovers inside one div by hovering over another div

Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand... The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on ...

javascriptjqueryhtmlcss