Achieving the desired alignment of text and button can be easily done using Bootstrap

Is there a way to align text buttons both to the left side and right side using bootstrap? I have included a screen and code below. I apologize if this question seems simple, but I am new to this field. I would like to know how to achieve this, and it would be great if the background image could also be responsive on mobile devices after these changes.

.graphics {
background: url("img/graphics.png");  /* graphic design block */
background-position: center center;
background-size: cover;
font-family: Lato;
color: white;
margin-top: 10px;
text-align: right;
padding: 100px 0px;
}


.btn-primary {
background-color:#090045;
margin-right:350px;
border-radius: 0;
border-width: thin;
}
<div class = "graphics">
<h2>Graphic Design</h2>
Lorem ipsum...
<a class="btn btn-primary btn-md" href="#graphic-design">See More</a>
</div>

Current Look: https://ibb.co/Brz8S4K

Desired Look: https://ibb.co/tm4HCdf

htmlcss

Answer №1

a tags are considered inline elements, which means they do not start on a new line by default.

To change this behavior, simply add display:block to the a element. You may also want to consider removing the margin-right property to keep it aligned on the right side.

Another approach to force the a tag onto a new line while maintaining its width is to wrap all the text inside a p element, which is a block-level element. This will automatically move the a tag to a new line without any additional styling needed.

Learn more about inline and block elements here.

.graphics {
background: url("img/graphics.png");  /* graphic design block */
background-position: center center;
background-size: cover;
font-family: Lato;
color: white;
margin-top: 10px;
text-align: right;
padding: 100px 0px;
  background-color: black
}


.btn-primary {
background-color:red;
/* margin-right:350px; maybe remove this */
border-radius: 0;
border-width: thin;

}
<div class = "graphics">
<h2>Graphic Design</h2>
<p>
Lorem ipsumLorem ipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsumipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumipsum...
...ihnxSymDK608D=fnxSymDK608D">
See More</a>
</body>
</html>

Answer №2

Make sure to enclose your text within a <p> tag and don't forget to include the mr-auto class on the button to align it to the right of the text.

.graphics {
  background: url("https://picsum.photos/200/300");
  /* block graphic design */
  background-position: center center;
  background-size: cover;
  font-family: Lato;
  color: white;
  margin-top: 10px;
  text-align: right;
  padding: 100px 0px;
}

.btn-primary {
  background-color: #090045;
  margin-right: 350px;
  border-radius: 0;
  border-width: thin;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="graphics">
    <h2>Graphic Design</h2>
    <p>
      Insert your text here.
    </p>
    <a class="btn btn-primary btn-md mr-auto" href="#graphic-design">See 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

Prevent JavaScript from being entered into the form

I'm currently developing an "HTML editor" for one of my webpages. Right now, I want to ensure that the editor only allows input of HTML and CSS elements without any Javascript (or Jquery). I've been attempting to prevent the use of <script> ...

javascriptphpjqueryhtml

storing a value in the browser's local storage

I am in the process of creating a new game that includes a high score feature. The idea is that when the current score surpasses the existing one stored locally, it will be replaced: localStorage.setItem('highScore', highScore); var HighScore = ...

javascripthtmllocal-storage2d-games

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...

javascripthtmlreactjsgoogle-maps-api-3

Build a photo carousel similar to a YouTube channel

Is there a way to create an image slider similar to the one on YouTube channels? I've noticed that when there are multiple videos on a channel, YouTube displays them in a slider with back and forth buttons to navigate through the videos that aren&apos ...

javascriptjquerycssimageslider

Two DIV elements are merging together with a cool zooming effect

As a beginner in using Bootstrap 4, I am working on creating a practice website. While designing the layout, I encountered an issue that seems simple but I can't seem to figure it out. <div id="box-container" class="container-fluid"> &l ...

javascriptjqueryhtmlcssbootstrap-4

Exploring the possibilities of device orientation in combination with 3D transforms

Imagine a project that aims to create a cube with sides representing different geolocations. The cube's sides for east, west, up, ground, north, and south are meant to always point in their respective directions. To gather the necessary data, the proj ...

css3drotationfirefox-osdevice-orientation

What is the best way to align a search box within a Bootstrap navbar?

Seeking assistance to center the search box within my Bootstrap navbar without disrupting alignment. I am aiming for a similar look as seen on linkedin.com. Any suggestions on how to achieve this? Here is a JSFiddle link to my navbar: https://jsfiddle.ne ...

htmlcsstwitter-bootstrap

What is the best way to align an image with the background of a div element?

Currently, I am attempting to create a page header that includes an image. To achieve this, I am using a div: <div id = "header"> </div> To set the background image of the div, I have added the following CSS: #header{ background-image: u ...

htmlcssimage

Two CSS files are loaded sequentially

Currently, when my HTML page loads, it first displays the styles from the initial CSS file before switching to the second CSS file. This brief moment where the page appears differently than intended is a bit frustrating. Is there a way to prevent this chan ...

htmlcss

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

What is the best way to eliminate excess white space on the right side in WordPress for a mobile perspective?

Is there a quick way to identify which element has shifted beyond the border? It seems like there is excess margin. How can I pinpoint the issue? The link to the broken page on mobile is I applied this style * {border: 2px solid red;} and no elements shif ...

javascriptjqueryhtmlcss

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

javascriptphphtml

Experiencing problems with web page layout when using bootstrap on IE8?

Here is a code snippet that functions correctly in IE9 and later versions, but encounters issues in IE8: <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" id="div1"> <div class="panel panel-default" style="" id="panel1"> ...

javascripthtmlcssinternet-explorer-8twitter-bootstrap-3

How to choose an option from a dropdown menu using React

In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...

javascripthtmlcssreactjsautocomplete

Creating a responsive single webpage using HTML/CSS

How can I make some div or img responsive for mobile format? <meta name="viewport" content="width=device-width, initial-scale=1" /> <div class="container"> <h1 class="title"> ...

htmlcss

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson

What is the best way to remove a CSS style using JavaScript?

For my website automation using Selenium, I encountered a challenging dropdown that was not the standard native one but a custom-designed version. To tackle this issue, I needed to set its CSS class to hidden in order to access the native functionality smo ...

javascriptjquerycssseleniumselenium-webdriver

Positioning a button on the side of the screen while a hidden side panel is open

I am attempting to create an animation using a side panel that will slide into view when a button is clicked. Here is how it appears when the page loads: https://i.sstatic.net/JPQ2W.jpg When the user clicks on one of the buttons, the notes panel will be ...

jqueryhtmlcssjquery-uisass

What is the best way to incorporate the same partial multiple times with varying content in Nunjucks?

I'm working on several page templates that require the same partial to be included multiple times but with different content each time. I explored looping this, but the order might not always be sequential. Here's an example of how my page templ ...

htmljsonnunjucks

Dynamic Loading of Hovercards using jQuery AJAX

I've been working on integrating jQuery hovercard into our web application, specifically to display HTML content retrieved from an AJAX page when a user hovers over a username link with the data attribute data-toggle="user". Here's what our code ...

jqueryhtmlajax